当前位置: 首页 > news >正文

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.

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

  1. 使用动态 import() 进行代码分割,减小每个 chunk 的大小
  2. 在 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()}...}}}
    })
    
  3. build.chunkSizeWarningLimit 中提高报错的阈值
    //vite.config.jsexport default defineConfig({...,build: {chunkSizeWarningLimit: 1600}
    })

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

相关文章:

  • siglip2(2) Naflex模型的动态分辨率原理
  • STM32F103_Bootloader程序开发05 - Keil修改生成文件的路径与文件名,自动生成bin格式文件
  • InnoDB中的锁
  • 第三章:地下三层的技术遗产
  • MySQL ALTER TABLE 组合操作时导致的错误
  • LoadRunner 是什么
  • 打卡day39
  • Shell 脚本基础笔记
  • 车载通信网络 --- CAN FD与CAN XL
  • 计算机毕业设计酒店后台管理系统(vue+springboot+mysql+开题+论文)
  • 切片器导航-大量报告页查看的更好方式
  • 免费开源批量图片格式转换工具
  • STM32F407VET6学习笔记7:Bootloader跳转APP程序
  • 数据可视化(第4、5、6次课)
  • 亚远景-ASPICE与ISO 26262:适用范围与应用场景的差异分析
  • 嵌入式鸿蒙系统中水平和垂直以及图片调用方法
  • 玛哈特校平机:金属板材加工的精整专家
  • 计算机网络之差错控制中的 CRC(循环冗余校验码)
  • 大模型调用数据库表实践:基于自然语言的SQL生成与数据查询系统
  • SSH免密登录其它用户脚本
  • 兼职做网站设计/快照网站
  • 哪个做网站平台好/公司网页制作流程
  • 开发定制软件系统/兰州seo推广
  • 怎样在各大网站发布信息/推广策略
  • 福清市住房和城乡建设局网站/小程序推广方案
  • 身份证 网站 备案/网站模板哪家好