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

尋找解決方案

（好吧，官網是英文的，看不懂）
于是到網上找了一下，發現了一種解決方法。http://www.neiyidaogou.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文件過大如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。