npm run build 报错：Some chunks are larger than 500 KB after minification

橘子味的冰淇淋~2025-06-02 20:59

当我们的 Vue 项目太大，使用 npm run build 打包项目的时候，就有可能会遇到以下报错：

bash 复制代码

(!) 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的大小

javascript 复制代码

//vite.config.js

export 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 中提高报错的阈值

javascript 复制代码

//vite.config.js

export default defineConfig({
    ...,
    build: {
        chunkSizeWarningLimit: 1600
    }
})

注意：以上解决方案可叠加执行