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

当我们的 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.

以上根据官方的提示给出以下解决方案:

  1. 使用动态 import() 进行代码分割,减小每个 chunk 的大小

  2. 在 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()
              }
              ...
            }
          }
        }
    })
  3. build.chunkSizeWarningLimit 中提高报错的阈值

    javascript 复制代码
    //vite.config.js
    
    export default defineConfig({
        ...,
        build: {
            chunkSizeWarningLimit: 1600
        }
    })

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

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript