vite Some chunks are larger than 500 kBs after minification. Consider: - Using dynamic import()

最新推荐文章于 2024-06-16 01:51:29 发布

词不达意难知

最新推荐文章于 2024-06-16 01:51:29 发布

阅读量6.7k

点赞数 8

分类专栏： node 文章标签： javascript 前端 vite

本文链接：https://blog.csdn.net/qq_45284938/article/details/129707796

版权

node 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章讲述了在Vue3项目使用vite打包时遇到区块大小超过500kB的问题，通过查阅资料和调整配置，特别是增加`chunkSizeWarningLimit`和优化terser压缩选项，以及手动拆分chunk，成功解决了问题。最终的build配置包括清理输出目录、关闭源码映射、设置压缩选项等。

摘要由CSDN通过智能技术生成

在这里插入图片描述
项目在打包时Some chunks are larger than 500 kBs after minification(一些区块在缩小后大于500 kB);

跳到提示的官网https://rollupjs.org/configuration-options/#output-chunkfilenames
草草翻了下未果最后在CSDN找到解决方式
【Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification
非常感谢大佬的分享

基于大佬处理逻辑最后加上适应的配置项

    outDir: BUILD_DIR, // 指定打包文件的输出目录
    emptyOutDir: true,  // 打包时先清空上一次构建生成的目录

完整build配置的代码

  build: {
    outDir: BUILD_DIR,
    sourcemap: false,
    minify: 'terser',
    chunkSizeWarningLimit: 1500,
    emptyOutDir: true,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
          return `js/${fileName}/[name].[hash].js`;
        }
      }
    }
  },