发布日期

宣布 VitePress 1.0

作者
vitepress logo

今天，我们很高兴地宣布 VitePress 的 1.0 版本发布（姗姗来迟）！

VitePress 是一款静态网站生成器 (SSG)，专为构建快速、以内容为中心的网站而设计。简而言之，VitePress 会获取您用 Markdown 编写的源内容，应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。

VitePress 基于 Vite 和 Vue 构建，是 VuePress 的精神继承者和现代替代品。

我能用 VitePress 做什么？ ​

  • 文档

    VitePress 附带一个为技术文档设计的默认主题。它为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等许多项目的文档提供支持。

    官方 Vue.js 文档 也基于 VitePress，但使用多个翻译之间共享的自定义主题。

  • 博客、作品集和营销网站

    VitePress 支持 完全自定义的主题，并提供标准 Vite + Vue 应用程序的开发体验。基于 Vite 构建也意味着您可以直接利用其丰富生态系统中的 Vite 插件。此外，VitePress 提供灵活的 API 来 加载数据（本地或远程）和 在构建时动态生成路由。只要数据可以在构建时确定，您就可以用它来构建几乎任何东西。

    这个博客本身 就是使用 VitePress 的自定义主题和数据加载 API 构建的。

开发体验 ​

VitePress 旨在为使用 Markdown 内容提供出色的开发体验 (DX)。

  • Vite 支持： 即时启动服务器，编辑始终立即反映（<100 毫秒）而无需页面重新加载。

  • 内置 Markdown 扩展： 前置信息、表格、语法高亮... 应有尽有。具体来说，VitePress 提供了许多用于处理代码块的先进功能，使其成为高度技术文档的理想选择。

  • Vue 增强 Markdown： 由于 Vue 模板与 HTML 的 100% 语法兼容性，每个 Markdown 页面也是一个 Vue 单文件组件。您可以使用 Vue 模板功能或导入的 Vue 组件在静态内容中嵌入交互性。

性能 ​

与许多传统 SSG 不同，传统 SSG 中每次导航都会导致整个页面重新加载，而由 VitePress 生成的网站在首次访问时会提供静态 HTML，但会成为 单页应用程序 (SPA) 以便在网站内进行后续导航。我们认为，这种模式为性能提供了最佳平衡。

  • 快速初始加载

    首次访问任何页面都会提供静态的预渲染 HTML，以实现快速加载速度和最佳 SEO。然后，页面会加载一个 JavaScript 包，将页面转换为 Vue SPA（“水合”）。与 SPA 水合速度慢的普遍假设相反，由于 Vue 3 的原始性能和编译器优化，此过程实际上非常快。在 PageSpeed Insights 上，典型的 VitePress 网站即使在网络速度慢的低端移动设备上也能获得接近完美的性能分数。

  • 快速加载后导航

    更重要的是，SPA 模型在初始加载之后会带来更好的用户体验。网站内的后续导航将不再导致整个页面重新加载。相反，传入页面的内容将被获取并动态更新。VitePress 还会自动预取视窗内链接的页面块。在大多数情况下，加载后导航会感觉很即时。

  • 无性能损失的交互性

    为了能够将嵌入在静态 Markdown 中的动态 Vue 部分进行水合，每个 Markdown 页面都会被处理为 Vue 组件并编译成 JavaScript。这听起来可能效率低下，但 Vue 编译器足够智能，可以将静态部分和动态部分分开，从而最大限度地减少水合成本和有效负载大小。对于初始页面加载，静态部分会自动从 JavaScript 有效负载中删除，并在水合过程中跳过。

没有 我们贡献者 的辛勤工作，VitePress 1.0 的道路不可能实现。特别感谢 Kia King Ishii (@kiaking) 为默认主题创建了精美设计，以及 Divyansh Singh (@brc-dd) 不懈地领导维护工作并推动新功能。