今日，我们非常高兴地宣布 VitePress（期待已久）1.0 版本正式发布！VitePress 是一个静态网站生成器（SSG），旨在构建快速、内容为中心的网站。简而言之，VitePress 接受您用 Markdown 编写的源内容，应用主题，并生成静态 HTML 页面，可轻松部署到任何地方。VitePress 基于 Vite 和 Vue 构建，是 VuePress 的精神继承者和现代替代品。

作者

• Evan You
• Twitter: @youyuxi

VitePress 的用途

文档

VitePress 预装了一个专为技术文档设计的默认主题。它支持 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等项目的文档。Vue.js 官方文档也基于 VitePress，但使用了一个自定义主题，供多个翻译共享。

博客、作品集和营销网站

VitePress 支持完全定制的主题，具有标准 Vite + Vue 应用程序的开发人员体验。由于建立在 Vite 之上，您还可以直接利用其丰富生态系统中的 Vite 插件。此外，VitePress 提供了灵活的 API 来加载数据（本地或远程），并在构建时动态生成路由。只要数据可以在构建时确定，您可以用它构建几乎任何内容。这篇博客就是使用 VitePress 的自定义主题和数据加载 API 构建的。

开发者体验

VitePress 旨在提供出色的开发者体验（DX），使处理 Markdown 内容更加便捷。

• 基于 Vite：即时服务器启动，编辑始终立即反映（<100ms），无需重新加载页面。
• 内置 Markdown 扩展：Frontmatter、表格、语法高亮等功能应有尽有。具体来说，VitePress 提供了许多用于处理代码块的高级功能，非常适合高度技术性文档。
• Vue 增强 Markdown：每个 Markdown 页面也是一个 Vue 单文件组件，得益于 Vue 模板与 HTML 的100%语法兼容性。您可以利用 Vue 模板功能或导入的 Vue 组件在静态内容中嵌入交互性。

性能

与许多传统 SSG 不同，在 VitePress 生成的网站中，每次导航都不会导致完整页面重新加载。这种模式在我们看来提供了性能上的最佳平衡：

快速初始加载

• 对任何页面的初始访问将提供静态预渲染 HTML，实现快速加载速度和最佳 SEO。然后页面会加载一个将页面转换为 Vue SPA 的 JavaScript 捆绑包（“hydration”）。与通常认为 SPA hydration 缓慢不同，这个过程实际上非常快速，得益于 Vue 3 的原始性能和编译优化。在 PageSpeed Insights 上，典型的 VitePress 站点即使在网络较慢的低端移动设备上也能实现接近完美的性能分数。

快速后续导航

• 更重要的是，SPA 模式会在初始加载后提供更好的用户体验。站点内部后续导航将不再导致完整页面重新加载。相反，将获取并动态更新传入页面的内容。VitePress 还会自动预取视口内链接的页面块。在大多数情况下，后续导航将感觉瞬间完成。

无需牺牲交互性

• 为了能够渲染静态 Markdown 中嵌入的动态 Vue 部分，在处理每个 Markdown 页面时都会将其视为 Vue 组件并编译为 JavaScript。这听起来可能效率低下，但 Vue 编译器足够智能以区分静态和动态部分，从而最小化水合成本和有效负载大小。对于初始页面加载，静态部分会自动从 JavaScript 负载中消除，并在水合期间跳过。