前言:之前个人站点用的是vuepress搭建的,虽然功能主题众多,但是用久了就觉得花里胡哨的,更想变得简洁一些.最主要想更换掉vuepress的原因是每次构建静态速度太慢了,开启热加载的速度也慢.让人很铁不成钢,前段时间发现了基于vite的vitevupress,所以马上进行了尝试.

与 vuepress 的对比

vuepress快速开始

mkdir vuepress
cd vuepress  && yarn init -y
yarn add -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md

# 在本地启动服务器
vuepress dev docs

# 构建静态文件 > .vitepress/dist
vuepress build docs

viepress快速开始

mkdir vitepress
cd vitepress  && yarn init -y
yarn add -D vitepress
echo '# Hello VitePress' > index.md

# 在本地启动服务器
npx vitepress

# 构建静态文件 > .vitepress/dist
npx vitepress build

总结

	vurpress	vitepress
启动服务器用时	8~10s	1~3s
构建静态文件用时	10~13s	3~5s
构建文件大小	257k	83k

1. 两个生成器的快速过程基本一致,在用yarn安装包依赖时,vuepress会慢一点.因为依赖比较多.
2. vitepress的启动和构建速度远远快与vuepress,当然这个差距大部分原因其实就是vite和Webpack的速度差距.
3. 在同样只有一个页面下,vitepress的构建大小也小得多,主要原因是vitepress剔除了许多vuepress拥有的功能,追求简洁.当然,vitepress现在只是相当于测试版本,许多功能还未确定,主创们也在寻找它的发展方向.
4. 更小的文件意味着可配置性更低,例如如果要用vitepress搭建个人博客,那么现在还只能自己解析markdown文件,生成文章列表,vitepress现在只提供当前页面的元数据.而vuepress可以直接在页面中使用{{$site.pages}}获得markdown文件的元数据.
5. vitepress现在的似乎只有默认主题,不像vuepress主题社区已经发展得非常完善了