vite项目构建优化chunkSizeWarningLimit
构建项目时，经常会遇到下面这样的分块儿建议提示，主要的意思单个模块文件超过了默认块儿限制，建议进行代码分块儿后进行动态导入可以加速页面加载速度。
$ pnpm run build
> [email protected] build /apps/code/nodejs/vue-demos/demo
> vite build
vite v3.0.9 building for production...
✓ 97 modules transformed.
dist/index.html 0.59 KiB
dist/assets/entry/index88af950d.js 7.65 KiB / gzip: 3.37 KiB
dist/assets/file/indexb5ddd979.css 5.55 KiB / gzip: 1.71 KiB
dist/assets/file/vendoref364db9.css 11.32 KiB / gzip: 2.20 KiB
dist/assets/chunk/vendor3fe3251a.js 1284.46 KiB / gzip: 442.74 KiB
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
解决方法
两种方案：
- 上调限制的上限，比如又 500KB 调整到 1500KB
- 将代码分割成多个chunk。
下面是一个完整的vite.config.js示例：
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
server: {
proxy: {
"/api": {
target: "https://localhost",
changeOrigin: true,
secure: false,
},
},
},
plugins: [vue()],
build: {
chunkSizeWarningLimit: 1500,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/.pnpm/')[1].split('/')[0].toString();
}
}
}
}
}
})
修改成功之后的效果如下:
$ pnpm run build
> [email protected] build /codes/vue-demos/demo
> vite build
vite v3.0.9 building for production...
✓ 92 modules transformed.
Generated an empty chunk: "@[email protected]"
Generated an empty chunk: "[email protected]"
dist/index.html 1.14 KiB
dist/assets/@[email protected] 0.00 KiB / gzip: 0.02 KiB
dist/assets/index.0253962c.js 7.70 KiB / gzip: 3.35 KiB
dist/assets/@[email protected] 9.04 KiB / gzip: 3.53 KiB
dist/assets/@[email protected] 6.60 KiB / gzip: 3.03 KiB
dist/assets/@[email protected] 3.30 KiB / gzip: 1.61 KiB
dist/assets/[email protected] 0.00 KiB / gzip: 0.02 KiB
dist/assets/[email protected] 3.32 KiB / gzip: 1.49 KiB
dist/assets/[email protected] 2.30 KiB / gzip: 0.72 KiB
dist/assets/[email protected] 19.01 KiB / gzip: 7.38 KiB
dist/assets/index.b5ddd979.css 5.55 KiB / gzip: 1.71 KiB
dist/assets/[email protected][email protected] 22.21 KiB / gzip: 9.13 KiB
dist/assets/@[email protected] 36.99 KiB / gzip: 15.41 KiB
这样，node_modules下的模块会被分成多个模块同时被加载，相对于线性加载单独的大文件来说，这样可以加速了页面加载速度。
总结
总的来说，虽然代码分块儿处理了，但分的块儿越多，产生的连接数就越多，建立连接也是耗时的，所以分块儿的数量也要合理控制才好。
听说一键三连点赞的朋友可以升职加薪哈！