大家好，我是奇兵，今天介绍一下现代化静态站点生成器!，希望能帮到大家。

3 月 21 日， 由 Vue 团队出品的现代化静态站点生成器 VitePress 正式发布 1.0 版本！它专为构建快速、以内容为中心的网站而生，能够轻松地将使用 Markdown 格式撰写的源文件内容转化为静态 HTML 页面，支持部署到任何平台。

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

使用场景

• 文档编写：VitePress 自带专为技术文档打造的默认主题，为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等项目的文档提供了支持。Vue.js 的官方文档也基于 VitePress 构建，并通过自定义主题实现多语言版本的无缝切换。

• 博客、作品集与营销网站：VitePress支持完全自定义的主题，并具备标准Vite + Vue应用程序的开发体验。由于基于 Vite 构建，还可以轻松利用 Vite 生态中的各类插件。更值得一提的是，VitePress提供了灵活的 API，支持本地或远程数据加载，并在构建阶段动态生成路由。只要数据在构建时是确定的，几乎可以用 VitePress 来构建任何类型的网站。

开发者体验

VitePress 旨在为处理 Markdown 内容提供出色的开发者体验。

• Vite 驱动：实现秒速启动服务器，每次编辑都能实时反映在页面上（<100ms），无需重新加载页面。

• 内置 Markdown 扩展：前置数据、表格、语法高亮等一应俱全，满足多样化的文档编写需求。特别是针对代码块的处理，VitePress 提供了众多高级特性，使其成为技术文档编写的理想选择。

• Vue 增强的 Markdown：借助 Vue 模板与 HTML 的完美兼容，每个 Markdown 页面都能成为 Vue 单文件组件。这意味着可以利用 Vue 的模板特性或导入的组件，为静态内容增添丰富的交互性，提升用户体验。

性能

与许多传统 SSG（静态站点生成器）不同，VitePress 生成的网站在首次访问时提供静态 HTML，但在网站内部进行后续导航时，它会变成一个单页应用程序（SPA）。这种模型为性能提供了最佳平衡：

• 快速初始加载： 首次访问任何页面时，都会提供静态的、预渲染的 HTML，以加快加载速度和优化 SEO。然后页面会加载一个 JavaScript 包，将页面转换为 Vue SPA（即“水合作用”）。与大家对 SPA 水合作用通常的缓慢假设相反，由于 Vue 3 的原始性能和编译器优化，这一过程实际上非常快。典型的 VitePress 网站在 PageSpeed Insights 中即使在低端移动设备和慢速网络环境下也能获得接近完美的性能评分。

• 快速加载后导航： 更重要的是，SPA 模型在初始加载后为用户提供了更好的体验。在网站内部进行后续导航时，不再需要整个页面重新加载。相反，会获取目标页面的内容并进行动态更新。VitePress 还会自动为视口内的链接预取页面块。在大多数情况下，加载后的导航会感觉非常快。

• 无缝的交互体验： 为了能够水合静态 Markdown 中嵌入的动态 Vue 部分，每个 Markdown 页面都被视为一个 Vue 组件并编译成 JavaScript。这听起来可能效率不高，但 Vue 编译器足够智能，能够分离静态和动态部分，从而最小化水合成本和有效载荷大小。对于初始页面加载，静态部分会自动从 JavaScript 有效载荷中消除，并在水合过程中跳过。

VitePress 官网：https://vitepress.dev/

喜欢的话点点赞收藏一下谢谢