vite2打包的时候vendor-xxx.js文件过大如何解决

这篇文章主要介绍“vite2打包的时候vendor-xxx.js文件过大如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vite2打包的时候vendor-xxx.js文件过大如何解决”文章能帮助大家解决问题。

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://www.yisu.com/article/241486.htm

  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               }             }

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

关于“vite2打包的时候vendor-xxx.js文件过大如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。