体验 VitePress:文档编译还能这么快!

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

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

安装

1
yarn add -D vitepress

从 VuePress 迁移配置

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

.vuepress/config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ 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 存在一些渲染上的小区别。

VuePress 效果

VitePress 效果

VuePress 在 IE 11 上的效果

VitePress 在 IE 11 上的效果

体验 VitePress:文档编译还能这么快!

https://www.imaegoo.com/2021/hello-vitepress/

作者

iMaeGoo

发布于

2021-02-07

更新于

2021-02-07

许可协议

CC BY 4.0

评论

微信二维码