问题描述
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`;
          }
        }
      }
    }