叁聖涅前提
VitePress 站点位于项目的
docs目录中。你使用的是默认的生成输出目录 （
.vitepress/dist）。VitePress 作为本地依赖项安装在项目中，并且你已在
package.json中设置以下脚本：json{ "scripts": { "docs:build": "vitepress build docs", "docs:preview": "vitepress preview docs", "docs:serve": "vitepress serve docs" } }
本地构建与测试
可以运行以下命令来构建文档：
默认情况下，构建输出位于
.vitepress/dist。你可以部署dist文件夹到任何你首选平台。sh$ npm run docs:build # or [root@vp vitepress-starter]# yarn docs:build yarn run v1.22.21 $ vitepress build docs vitepress v1.0.0-rc.36 ✓ building client + server bundles... ✓ rendering pages... build complete in 21.54s. Done in 22.72s. [root@vp vitepress-starter]# [root@vp vitepress-starter]# ll total 44 drwxr-xr-x. 5 root root 68 Jan 12 23:15 docs drwxr-xr-x. 36 root root 4096 Jan 12 12:38 node_modules -rw-r--r--. 1 root root 354 Jan 13 11:13 package.json -rw-r--r--. 1 root root 35840 Jan 12 12:38 yarn.lock [root@vp vitepress-starter]# ll docs/ total 4 -rw-r--r--. 1 root root 1323 Jan 12 23:09 index.md drwxr-xr-x. 3 root root 18 Jan 12 21:15 oracle drwxr-xr-x. 2 root root 38 Jan 12 19:41 public [root@vp vitepress-starter]# ll docs/.vitepress/ -a total 4 drwxr-xr-x. 6 root root 82 Jan 13 11:29 . drwxr-xr-x. 5 root root 68 Jan 12 23:15 .. drwxr-xr-x. 5 root root 70 Jan 12 23:25 cache drwxr-xr-x. 2 root root 22 Jan 12 21:00 components -rw-r--r--. 1 root root 815 Jan 12 23:25 config.js drwxr-xr-x. 4 root root 120 Jan 13 11:29 dist drwxr-xr-x. 2 root root 57 Jan 12 22:23 relaConf [root@vp vitepress-starter]# ll docs/.vitepress/dist/ -a total 380 drwxr-xr-x. 4 root root 120 Jan 13 11:29 . drwxr-xr-x. 6 root root 82 Jan 13 11:29 .. -rw-r--r--. 1 root root 15687 Jan 13 11:29 404.html drwxr-xr-x. 3 root root 4096 Jan 13 11:29 assets -rw-r--r--. 1 root root 122157 Jan 13 11:29 avatar.png -rw-r--r--. 1 root root 169 Jan 13 11:29 hashmap.json -rw-r--r--. 1 root root 18327 Jan 13 11:29 index.html -rw-r--r--. 1 root root 219690 Jan 13 11:29 my.png drwxr-xr-x. 3 root root 18 Jan 13 11:29 oracle [root@vp vitepress-starter]#
可能遇到的问题
(!) 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.解决办法
以下办法没能解决我环境中的这个问题，暂时没有解决这个警告。
- 上调限制的上限，比如又 500KB 调整到 1500KB
- 将代码分割成多个chunk。
import { defineConfig } from 'vite'
export default defineConfig({
build: {
chunkSizeWarningLimit: 1500,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/.pnpm/')[1].split('/')[0].toString();
}
}
}
}
}
})这样，node_modules下的模块会被分成多个模块同时被加载，相对于线性加载单独的大文件来说，这样可以加速了页面加载速度。
总的来说，虽然代码分块儿处理了，但分的块儿越多，产生的连接数就越多，建立连接也是耗时的，所以分块儿的数量也要合理控制才好。
本地测试
构建文档后，通过运行以下命令可以在本地预览测试它：
sh$ npm run docs:preview # or $ yarn docs:serve [root@vp vitepress-starter]# yarn docs:serve --host 0.0.0.0 --port 80 yarn run v1.22.21 $ vitepress serve docs --host 0.0.0.0 --port 80 vitepress v1.0.0-rc.36 Built site served at http://localhost:80/preview命令将启动一个本地静态 Web 服务http://localhost:4173，该服务以.vitepress/dist作为源文件。这是检查生产版本在本地环境中是否正常的一种简单方法。serve命令会启动一个本地静态web服务器，该服务器提供在http://localhost:5000访问.vitepress/dist中文件的服务。这是一个在本地环境中检查产品构建是否正常的简单方法。可以通过传递
--port作为参数来配置服务器的端口。json{ "scripts": { "docs:preview": "vitepress preview docs --port 8080" } }现在
docs:preview方法将会在http://localhost:8080启动服务。
设定 public 根目录
默认情况下，我们假设站点将部署在域名 (/) 的根路径上。如果站点在子路径中提供服务，例如 https://mywebsite.com/blog/，则需要在 VitePress 配置中将 base 选项设置为 '/blog/'。
例：如果你使用的是 Github（或 GitLab）页面并部署到 user.github.io/repo/，请将 base 设置为 /repo/。
HTTP缓存标头
如果可以控制生产服务器上的 HTTP 标头，则可以配置 cache-control 标头以在重复访问时获得更好的性能。
生产版本对静态资源 (JavaScript、CSS 和其他非 public 目录中的导入资源) 使用哈希文件名。如果你使用浏览器开发工具的网络选项卡查看生产预览，你将看到类似 app.4f283b18.js 的文件。
此哈希 4f283b18 是从此文件的内容生成的。相同的哈希 URL 保证提供相同的文件内容——如果内容更改，URL 也会更改。这意味着你可以安全地为这些文件使用最强的缓存标头。所有此类文件都将放置在输出目录的 assets/ 中，因此你可以为它们配置以下标头：
Cache-Control: max-age=31536000,immutable