【Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification

最新推荐文章于 2024-08-22 14:21:56 发布

任磊abc

最新推荐文章于 2024-08-22 14:21:56 发布

阅读量2.2w

点赞数 23

分类专栏： vite 文章标签： javascript vue3 vite

本文链接：https://blog.csdn.net/sinat_36728518/article/details/123112966

版权

vite 专栏收录该内容

18 篇文章 5 订阅

订阅专栏

本文介绍了在Vite打包时遇到块大小超过限制的问题，提供了解决方案，包括增大限制和手动分解块。通过配置`chunkSizeWarningLimit`和`rollupOptions.manualChunks`，可以避免警告并优化打包后的文件结构。此外，还展示了如何自定义chunk文件名，以便将不同类型的文件放在不同的子目录下，提高文件组织性。

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

问题描述
vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification：

解决方法
1、加大限制的大小将500kb改成1000kb或者更大：

chunkSizeWarningLimit:1500

build.chunkSizeWarningLimit 类型： number
默认： 500
块大小警告的限制（以 kbs 为单位）

2、分解块，将大块分解成更小的块,在vite.config.js当中的build下面进行配置

rollupOptions: {
        output:{
            manualChunks(id) {
              if (id.includes('node_modules')) {
                  return id.toString().split('node_modules/')[1].split('/')[0].toString();
              }
          }
        }
    }

build.rollupOptions
类型： RollupOptions
直接自定义底层 Rollup 包。这与可以从 Rollup 配置文件导出的选项相同，并将与 Vite 的内部 Rollup 选项合并。有关更多详细信息，请参阅汇总选项文档。

接下来运行yarn build进行打包

通过以上的操作警告虽然没有了,但是生成的文件都在dist下面的assets文件下，里面既有js、css等等。因此，可以将不同的文件放在不同的文件下，这样比较好。

接着在build下面配置

chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId
              ? chunkInfo.facadeModuleId.split('/')
              : [];
            const fileName =
              facadeModuleId[facadeModuleId.length - 2] || '[name]';
            return `js/${fileName}/[name].[hash].js`;
          }

生成的文件如下

所有配置代码：

build: {
      sourcemap: false,
      minify: 'terser',
      chunkSizeWarningLimit: 1500,
      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`;
          }
        }
      }
    }