npm run build 报错:Some chunks are larger than 500 KB after minification
当我们的 Vue 项目太大,使用 npm run build
打包项目的时候,就有可能会遇到以下报错:
(!) 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.
以上根据官方的提示给出以下解决方案:
- 使用动态 import() 进行代码分割,减小每个 chunk 的大小
- 在 rollup 配置文件中添加 output.manualChunks,将模块拆分成多个 chunk,减小每个 chunk的大小
//vite.config.jsexport default defineConfig({...,rollupOptions:{output:{// 最小化拆分包manualChunks(id: any) {// 将 node_modules 中的依赖打包if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString()}...}}} })
- build.chunkSizeWarningLimit 中提高报错的阈值
//vite.config.jsexport default defineConfig({...,build: {chunkSizeWarningLimit: 1600} })
注意:以上解决方案可叠加执行