什么是 VitePress？

Posted 2022-05-24 前端精髓

VuePress 是 Vue 驱动的静态网站生成器，享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。VuePress 会为每个页面预渲染生成静态的 html。

VitePress 是 VuePress 的兄弟（替代品），建立在Vite之上。

虽然 VuePress v1 很好，但是构建在 Webpack 之上，为一个只有几页的简单文档站点启动开发服务器所花费的时间变得难以忍受。即使是 HMR 更新也可能需要几秒钟才能反映在浏览器中！

从根本上说，这是因为 VuePress v1 是一个底层的 Webpack 应用程序。即使只有两页，它也是一个完整的 Webpack 项目（包括所有主题源文件）进行编译。当项目有很多页面时，情况会变得更糟——每个页面都必须首先完全编译，然后服务器才能显示任何内容！

顺便说一句，Vite 很好地解决了这些问题：几乎即时的服务器启动、仅编译正在服务的页面的按需编译以及闪电般的 HMR。

对 VuePress v1 的改进

利用 Vue 3 改进的模板静态分析来尽可能地对静态内容进行字符串化。静态内容以字符串文字而不是 javascript 渲染函数代码的形式发送——因此 JS 有效负载的解析成本要低得多，并且更新也变得更快。

使用 Vite

1. 更快的开发服务器启动
2. 更快的热更新
3. 更快的构建

页面更轻巧

1. Vue 3 tree-shaking + Rollup 代码拆分
2. 不会为每个请求的每个页面发送元数据。这将页面权重与页面总数分离。仅发送当前页面的元数据。客户端导航将新页面的组件和元数据一起获取。
3. 不使用vue-router，因为 VitePress 的需求非常简单和具体 - 使用简单的自定义路由器代替。
4. i18n 语言环境数据也应该按需加载。

其他差异

VitePress 更加固执己见且可配置性更低：VitePress 宗旨在缩减当前 VuePress 的复杂性，并从其极简主义根源重新开始。

VitePress 面向未来：VitePress 仅针对支持原生 ES 模块导入的浏览器。它鼓励使用原生 JavaScript 而不进行编译，并使用 CSS 变量进行主题化。

总结

VitePress 是 VuePress 的孪生兄弟，它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快，但它在灵活性和可配置性上作出了一些让步，比如它不支持插件系统。当然，如果你没有进阶的定制化需求， VitePress 已经足够支持你将你的内容部署到线上。

VitePress 与当前的 VuePress 生态系统（主要是主题和插件）不兼容。总体思路是，VitePress 将拥有一个更精简的主题 API。

下面对比说明一下

框架名称	说明	特点
VuePress v1	vuepress的v1版本	Vue 和 Vue Router和 Webpack
vuepress-next	vuepress的v2版本	Vue 和 Vue Router 和 [Vite/Webpack]
VitePress	特别精简版	Vue3 和 Vite

VuePress 一直以来都在使用 Webpack 作为打包工具来进行网站的开发和构建。从 VuePress v2 开始，我们还支持使用其他的打包工具，并且现在使用 Vite 作为默认的打包工具。当然，你仍然可以选择使用 Webpack 。