尤小右：VitePress 初步实现小目标，极简静态站点生成器
尤小右：VitePress 初步实现小目标，极简静态站点生成器
VitePress：Vite & Vue 驱动的静态网站生成器 https://github.com/vuejs/vitepress
VuePress的小兄弟，建立在vite的基础上
npm install -D vitepress
echo '# Hello VitePress' > index.md
# starts dev server
npx vitepress
# build > .vitepress/dist
npx vitepress build注意，这是早期的WIP! 默认的主题是不存在的，但基本的工作流程是有的。
定制化
可以通过.vitepress/config.js进行配置（见src/config.ts）。
您可以通过添加以下文件来开发您的自定义主题。
.vitepress/theme/Layout.vue
<template>
<h1>Custom Layout!</h1>
<Content/><!-- make sure to include markdown outlet -->
</template>.vitepress/theme/index.js
import Layout from './Layout.vue'
export default {
Layout,
NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
enhanceApp({ app, router, siteData }) {
// app is the Vue 3 app instance from createApp()
// router is VitePress' custom router (see `lib/app/router.js`)
// siteData is a ref of current site-level metadata.
}
}与VuePress不同，在一个主题中唯一有固定位置的文件是index.js----其他的东西都是在那里导入和导出，就像在一个普通的应用程序中一样。
动机
我喜欢VuePress，但是构建在webpack之上，为一个只有几个页面的简单文档站点启动dev服务器所需的时间正变得难以忍受。即使是HMR更新也可能需要几秒钟才能在浏览器中反映出来！
作为一个参考，Composition API RFC repo只有两页，但启动服务器需要4秒，而任何编辑在浏览器中反映出来的时间几乎是2秒。
从根本上讲，这是因为VuePress是一个底层的Webpack应用程序。即使只有两页，也要编译完整的webpack项目（包括所有主题源文件）。当项目有很多页面时，情况变得更糟-必须首先完全编译每个页面，服务器才能显示任何内容！
顺便说一下，vite很好地解决了这些问题：几乎是即时启动服务器，按需编译，只编译正在服务的页面，以及快速的HMR。此外，还有一些额外的设计问题，我在VuePress中注意到了一些额外的设计问题，但由于需要大量的重构，所以一直没有时间去解决。
现在，借助vite和Vue 3，现在应该重新考虑“ Vue驱动的静态站点生成器”的真正含义了。
对VuePress的改进
1.使用Vue 3
利用Vue 3改进的模板静态分析来尽可能对静态内容进行分类。静态内容是作为字符串文字而不是JavaScript呈现函数代码发送的-JS有效负载因此解析起来便宜得多，并且合成也变得更快。
注意，在应用优化的同时，用户仍然可以在标记内容中自由混合Vue组件 - 编译器会自动为你做静态/动态分离，你永远不需要考虑。
2.在后台使用vite
- 开发服务器启动更快
- 更快的热更新
- 更快的构建（内部使用汇总）
3.页面更轻
- Vue 3 tree-shaking + Rollup 代码分割。
- 不为每个请求的每个页面发送元数据。这将使页面权重与页面总数解耦。只发送当前页面的元数据。客户端导航会将新页面的组件和元数据一起获取。
- 不使用vue-router，因为VitePress的需求是非常简单和具体的--使用一个简单的自定义路由器（200LOC以下）来代替。
- (WIP) i18n locale数据也要按需获取。
其他的区别
更多固定内容，可配置性更低。VitePress的目标是缩减当前VuePress的复杂性，并从极简主义的根源上重新出发。
面向未来：VitePress只针对支持原生ES模块导入的浏览器。它鼓励使用原生JavaScript和CSS变量进行主题设计。
这将成为未来的下一个VuePress吗？
也许！当前使用的是另一个名称，因此我们不会过分致力于与当前VuePress生态系统（主要是主题和插件）的兼容性。我们将看到在不损害上面列出的设计目标的情况下可以达到的距离。但是总的想法是，VitePress将具有尽可能少的主题API（最好使用JavaScript API而不是文件布局约定），并且可能没有插件（所有自定义均在主题中完成）。