idea的maven怎么生成war包打包的时候vendor-xxx.js文件过大的解决方法

导读vite2是一个非常好用的工具，只是随着代码的增多，打包的时候vendor-xxxxxx.js文件也越来越大，这就郁闷了，我来为大家讲解一下关于idea的m....

vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了，我来为大家讲解一下关于idea的maven怎么生成war包?跟着小编一起来看一看吧!

idea的maven怎么生成war包

vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了。

打包时遇到警告

输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)

Some chunks are larger than 500kb after minification. Consider:

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

由于打包时有些依赖包体积过于庞大，提示你进行配置分割；

https://rollupjs.org/guide/en/#outputmanualchunks

寻找解决方案

（好吧，官网是英文的，看不懂）于是到网上找了一下，发现了一种解决方法。https://blog.csdn.net/weixin_41277748/article/details/116431789

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

尝试了一下，确实可以分成多个文件，但是问题又来了，分成的文件有大有小，大文件可以接受，但是一堆几k的小文件看着就烦了，于是又想了想，发现可以这样。

build: { sourcemap: true, outDir: distp, //指定输出路径 assetsDir: static/img/, // 指定生成静态资源的存放路径 rollupOptions: { output: { manualChunks(id) { if (id.includes(node_modules)) { const arr = id.toString().split(node_modules/)[1].split(/) switch(arr[0]) { case @kangc: case @naturefw: case @popperjs: case @vue: case axios: case element-plus: return _ arr[0] break default : return __vendor break } } }, chunkFileNames: static/js1/[name]-[hash].js, entryFileNames: static/js2/[name]-[hash].js, assetFileNames: static/[ext]/[name]-[hash].[ext] }, brotliSize: false, // 不统计 target: esnext, minify: esbuild // 混淆器，terser构建后文件体积更小 } },

思路

按照模块分开打包，大模块独立打包，小模块合并打包，这样就不会出现一大堆小文件了。

补充

经过不断尝试发现，@kangc（@kangc/v-md-editor）也就是md的编辑器不能单独打包，会报错。还有 axios 也不能单独打包，会报错。

if (id.includes(node_modules)) { const arr = id.toString().split(node_modules/)[1].split(/) switch(arr[0]) { case @naturefw: // 自然框架 case @popperjs: case @vue: case element-plus: // UI 库 case @element-plus: // 图标 return _ arr[0] break default : return __vendor break } }

这几个可以分开打包，其他的遇到再说。