大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

2024 年 3 月 21 日 Evan You 发布了 VitePress v1.0 版本，本文将带着大家简单聊聊什么是 VitePress 以及 v1.0 版本带来了那些优秀特性。

1. 什么是 VitePress

VitePress is Vite & Vue Powered Static Site Generator. It turns Markdowns to Beautiful Docs in Minutes

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

VitePress 建立在 Vite 和 Vue 之上，是 VuePress 的精神继承者和现代替代品，同时为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等文档提供支持。VitePress 的典型特征包括：

• 专注于内容：只需使用 Markdown 即可轻松创建精美的文档网站
• 享受 Vite DX：即时服务器启动，闪电般快速的热更新，并利用 Vite 生态插件
• 使用 Vue 进行定制：直接在 Markdown 中使用 Vue 语法和组件，同时支持使用 Vue 构建自定义主题
• 站点速度快性能好：使用静态 HTML 进行快速初始加载，使用客户端路由进行快速加载后导航。

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

目前 VitePress 在 Github 通过 MIT 协议开源，有超过 10.8k 的 star、1.8k 的 fork、21.8k 的项目依赖量、代码贡献者 300+、妥妥的前端优质开源项目。

2.VitePress v1.0 新特性

与许多传统的 SSG 不同，VitePress 生成的网站在初次访问时提供静态 HTML，随后水合 (Hydration) 为单页应用程序（SPA）以供站内的后续导航，该模型提供了最好的性能与速度的平衡。

2.1 快速初始化页面加载

对任何页面的初始访问都提供静态、预渲染的 HTML 以实现快速加载速度和最佳 SEO。

然后页面会加载一个 JavaScript Bundle，将页面水合为 Vue SPA，借助于 Vue 3 性能和编译器优化该过程非常快，用户几乎无感。 根据 PageSpeed Insights 数据，即使在网络速度较慢的低端移动设备上，VitePress 网站也能获得近乎完美的性能分数。

2.2 快速加载后导航

VitePress 的 SPA 模型在初始加载后能带来更好的用户体验。

// 使用 Speculation Rules API prefetch 规则配置
// 或者使用 <link rel="prefetch" href="next.html" />
<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html"]
      }
    ]
  }
</script>

站内的后续导航不会导致整个页面重新加载。 相反，传入页面的内容被获取并动态更新，VitePress 还会自动预取视口内链接的页面块。 在大多数情况下，加载后导航几乎是实时的。

2.3 较好的互动性

为了能够水合嵌入静态 Markdown 中的动态 Vue 部分，每个 Markdown 页面都被处理为 Vue 组件并编译为 JavaScript。

---
hello: world
---
<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>

## Markdown Content
The count is: {{count}}
<button :class="$style.button" @click="count++">Increment</button>

<style module>
.button {
  color: red;
  font-weight: bold;
}
</style>

听起来可能效率比较低，但 Vue 编译器足够智能，可以分离静态和动态部分从而最大限度减少水合成本和有效负载大小。 对于初始页面加载，静态部分会自动从 JavaScript 有效负载中消除并在水合作用期间跳过。

参考资料

https://blog.vuejs.org/posts/vitepress-1.0

https://vitepress.dev/

https://github.com/vuejs/vitepress

https://developer.mozilla.org/en-US/docs/Glossary/Prefetch