体验 VitePress：文档编译还能这么快！

基于 VuePress 的项目文档的编译速度一直让我很苦恼，启动一次 dev server 要大约半分钟的时间，而且哪怕只有一个 Hello World，速度也是这么慢。相比之下，Hexo 都比它快。这当然不只是 VuePress 本身的问题，要说还得归咎于 Webpack。

于是 Vite 诞生了，一起诞生的还有 VitePress。好耶！虽然 VitePress 仍处于 WIP 阶段，告诉我们不要在任何地方使用，但我们可以提前对比一下，它究竟能比 VuePress 快多少？我们使用基于 VuePress 的 Twikoo 文档测试一下。

安装

yarn add -D vitepress

从 VuePress 迁移配置

VitePress 中 themeConfig.sidebar 的配置，较 VuePress 有些不同，需要新建 .vitepress 目录，对原先的配置做一点点改动

.vuepress/config.js

module.exports = {
  title: 'Twikoo 中文文档',
  description: 'Twikoo 中文文档',
  themeConfig: {
    sidebar: [
      ['/', '简介'],
      '/quick-start',
      '/faq',
      '/api',
      '/link'
    ],
    lastUpdated: true,
    // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
    repo: 'imaegoo/twikoo',
    // 假如文档不是放在仓库的根目录下：
    docsDir: 'docs',
    // 假如文档放在一个特定的分支下：
    docsBranch: 'dev',
    // 默认是 false, 设置为 true 来启用
    editLinks: true
  }
}

.vitepress/config.js

module.exports = {
  title: 'Twikoo 中文文档',
  description: 'Twikoo 中文文档',
  themeConfig: {
    sidebar: {
      '/': [
        { text: '简介', link: '/' },
        { text: '快速上手', link: '/quick-start' },
        { text: '常见问题', link: '/faq' },
        { text: 'API 文档', link: '/api' },
        { text: '相关文档', link: '/link' },
      ]
    },
    lastUpdated: true,
    // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
    repo: 'imaegoo/twikoo',
    // 假如文档不是放在仓库的根目录下：
    docsDir: 'docs',
    // 假如文档放在一个特定的分支下：
    docsBranch: 'dev',
    // 默认是 false, 设置为 true 来启用
    editLinks: true
  }
}

VitePress 没有把 README.md 渲染成首页，需要把 README.md 重命名为 index.md。

测试编译速度

多次测试在机械硬盘上两者的编译速度，VuePress 的编译时间在 30 ~ 50 秒之间，而 VitePress 的编译时间基本都在 6 ~ 7 秒，遥遥领先。

vuepress

$ vuepress build docs
wait Extracting site metadata...
tip Apply local theme at D:\Workspace\Jimmy\twikoo\docs\.vuepress\theme...
tip Apply theme local (extends @vuepress/theme-default) ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...tip Apply plugin @vuepress/last-updated (i.e. "@vuepress/plugin-last-updated") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

√ Client
  Compiled successfully in 17.77s

√ Server
  Compiled successfully in 14.63s

wait Rendering static HTML...
success Generated static files in docs\.vuepress\dist.

Done in 31.87s.

vitepress

$ vitepress build docs
vitepress v0.11.5
vite v2.0.0-beta.65
⠹ building client + server bundles...Langua e does not exist: sh
ge does not exist: shLanguage does not exist: sh
Language does not exist: sh
Language does not exist: sh
Language does not exist: sh
Language does not exist: sh
Language does not exist: sh
✓ building client + server bundles...
✓ rendering pages...
build complete in 5.39s.
Done in 6.27s.

页面效果

基本一致，可以看出 VitePress 存在一些渲染上的小区别。