大家好，这里是大家的林语冰。
是的没错，那个男人又双叒叕出手了。这次他带来的是 VitePress 1.0，以及颜值爆表的旅拍。
不久前，尤大在朋友圈十分鸡冻地爆料，VitePress 1.0 正式发布，这也是 VitePress 诞生以来升级的第一个语义化主版本，一个值得纪念的里程碑。
然后，尤大就跑路去旅游了，一边移动办公，一边摆拍洱海。果不其然，码生如逆旅，bug 和 life，总要有一个在路上。
作为沉迷学习的 UP 主，我只能一边偷看尤大的"云旅行"流口水，一边啪啪啪码字，给大家科普一下 VitePress。
既然没法偷得浮生半日闲，不如就静下心来深度学习一下：
- VitePress 到底是什么鬼物？
- VitePress 和 VuePress 有何区别？
- 我们可以用 VitePress 来搞什么事情？
VitePress 是什么鬼物？
根据 VitePress 官方文档的简介，VitePress 是一个由 Vite 和 Vue 共同驱动的 SSG（静态站点生成器）。
如果你像我一样，不太清楚 MPA/SPA/SSR/SSG/...... 等一大坨客户端和服务端渲染方式的魔鬼细节，那我们可以用一句话简单理解 VitePress ------ Vue/VueUse/Pinia/Vite/Vitest 等官方文档，都是基于 VitePress 构建的。
VitePress 的口号就是将 Markdown 变成优雅的文档，且只需一杯泡面的时间。一杯泡面的时间只需要几分钟，乍一听好像不够持久，但这恰恰是 VitePress 的亮点 ------ 快，而且非常快。
VitePress 的特点在于"内容优先，Markdown 至上"，它可以将 Markdown 编写的一切内容，根据应用的主题生成静态 HTML 页面，随时随地部署到地球上。换而言之，VitePress 的设计动机就是构建快速、内容优先的站点。
VitePress vs VuePress
VitePress 和 VuePress 不能说是毫无关系，只能说是大同小异。事实上，VitePress 灵感正是来源于 VuePress。
当然啦，我们都知道 JavaScript 和 Java 的命名也是看起来大同小异，实际上则一龙一猪。既然已有前车之鉴，我们就有必要先瞄一下 VuePress，再比较一下 VuePress vs VitePress 的异同点，从而更系统地学习 VitePress。
根据 VuePress 官方文档的介绍，VuePress 的设计初衷是为了满足 Vue 及其周边生态的文档需求，后来也用于辅助大量用户构建它们的博客和文档等。
VuePress 是一个"Markdown 至上"的 SSG（静态网站生成器）。我们可以使用 Markdown 来撰写文档、博客等，然后 VuePress 会生成一个静态网站来展示它们。
同时，VuePress 可以在一定程度上搞定 Hexo 和 GitBook 等深受程序员群体青睐的文档痛点。
既然 VuePress 如此优秀，为何还要反复造轮子，再孵化出 VitePress 呢？
这是因为，最初的 VuePress 基于 Vue 2 和 webpack。那时的前端工具链中，webpack 还处于垄断地位，后来高产似母猪的尤大又双叒叕孵化了同款竞品 Vite，因为 webpack 在构建 Vue 源码等大型项目时实在是太慢了。
起初 Vite 并没有一夜爆火，但一直在稳定迭代，直到近几年，各大前端生态都开始拥抱 Vite，Vite 真正找到了流量密码。
Vite 原本也没有和 Vue 强耦合，所以可以作为独立的前端工具链无缝衔接。如今，Vite 5 性能已经已经翻了几番，未来规划还会"锈化"，使用 Rust 重构底层功能，敬请期待。
VitePress 也随着 Vite 应运而生。虽然今天尤大官宣的是 VitePress 的第一个主版本升级，但 VitePress 这个项目其实从 2019 年就开始迭代了。借助 Vue 3 和 Vite，VitePress 提供了更好的开发体验和生产性能。
除了早期的构建工具差别，VitePress 和 VuePress 的 API 区别主要在于主题和自定义。如果您之前使用的是默认主题的 VuePress 1，那么迁移到 VitePress 应该会比较丝滑。
目前 VuePress 2 也在维护状态，它也支持 Vue 3 和 Vite，与 VuePress 1 的兼容性比 VitePress 更好。
我不确定 VuePress GitHub 仓库提及的"maintenance mode"（维护模式）的确切含义，比如只维持现状、不更新新功能等，如果你知道，记得在评论区留言科普一下。
虽然但是，同时维护两个 SSG 项目并不现实，哪怕尤大很能肝，Vue 团队也肝不动了。因此，Vue 团队决定重点关注 VitePress，将其作为长期维护的主要 SSG 选择。
为什么要选择使用 VitePress ？
VuePress 构建时，会为站点创建一个 SSR（服务端渲染）的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML。这种方案的灵感来源于 Nuxt 和 Gatsby 等项目，VitePress 大抵也是如此。
事实上，Nuxt 几乎可以完美取代 VuePress 或 VitePress，但 Nuxt 是为构建 App 而生的，而 VitePress 的产品定位则更关注轻量化、内容优先的静态网站。
此外，VitePress 的文档更亲民，且由于 VitePress 比 Nuxt 这种元框架更轻量，学习成本也较低。
性能方面，VitePress 已经有详细的设计说明。传统的 SSG 每次导航都会导致页面完全重载，VitePress 的 SSG 会在首次访问时提供静态 HTML，再变成了 SPA（单页应用程序）进行站内的后续导航，包括但不限于：
- 初始加载很快
- 加载完毕后快速切换
- 高效的交互
至于 VuePress，VitePress 可以视为 VuePress 的孪生兄弟。但 VitePress 比 VuePress 更轻更快，但它在灵活性和可配置性上有所权衡，比如 VitePress 不支持插件系统。所以，如果你没有进阶的定制化需求，VitePress 已经足够将你的内容部署到线上。
如果你想构建和部署自己的个人博客或项目文档，VitePress 愿意为您效劳，而且你可以按需自定义主题，进行更细粒度的定制。尤其是如果你本身就熟悉 Vue + Vite 生态，那么使用起来会更加得心应手。
本期话题是 ------ 你有没有想推荐的 SSG 框架？
欢迎在本文下方自由言论，文明共享。谢谢大家的点赞，掰掰~
《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。
