如何优化 Vitepress 的构建速度？

VitePress的底座是Vite，热更新与构建速度，对比其它Webpack方案，优势已经非常明显了，但是依然有优化空间。

尝试1500文档，构建build时间：

> vitepress build docs

  vitepress v1.3.4

/ building client + server bundles...
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ building client + server bundles...
✓ rendering pages...
✓ generating sitemap...
build complete in 175.93s.

当项目的Markdown文件很多时，编译构建要几分钟才能完成。

可能影响也不大，而且大部分项目都没这么多文档，但是这个问题是存在的，采取一些措施，还是可以尽可能的提高效率。

一、善用缓存机制

就像“好记性不如烂笔头”，缓存能帮我们记住那些已经处理过的东西，避免重复劳动。在 Vitepress 中，合理配置缓存可以大大提高构建速度。

VitePress默认是开启缓存的，默认缓存目录docs/.vitepress/cache。

这样一来，Vitepress 就会把一些构建过程中的中间结果保存下来，下次构建时，如果相关内容没有变化，就能直接从缓存中读取，“一步到位”，节省大量时间。

二、精简依赖

“兵在精而不在多”，项目中的依赖也是如此。过多不必要的依赖会拖慢构建速度。

定期审查 package.json 文件，去除那些不再使用的或者可以用更轻量级替代的依赖。比如说，如果某个功能模块只是偶尔用到，而且体积较大，不妨考虑在需要的时候再动态引入。

三、优化图片处理

图片可是网页中的“重量级选手”，处理不好就会让构建速度“老牛拉破车”。

压缩图片大小，选用合适的图片格式（如 WebP），并且利用 Vitepress 的图片懒加载功能，让图片在真正需要显示的时候再加载，能有效地减轻构建时的负担。

有条件可以使用外链图片。

没条件必须使用本地图片，可以每次写完文档，检查一下图片文件夹，对大图做个批量压缩。如果是自己的独立站，这个动作能给你节省不少流量钱。

四、利用预构建

“凡事预则立，不预则废”，Vite的预构建在 Vitepress 中也能用。

通过配置预构建，可以提前处理一些复杂的模块或者库，减少构建时的计算量。

五、代码分割

“分而治之”是个好策略，在 Vitepress 中进行代码分割也不例外。

将代码按照功能模块分割成多个小块，只在需要的时候加载相应的模块，避免一次性加载过多不必要的代码，从而提高构建和加载速度。

总结

前面列出了一些优化方法，其实Vite的优化手段，基本都能用在VitePress项目上。