vue cli4 bundle分割（單獨打包第三方庫文件,配置splitChunks）

    項目中的第三方庫默認會被打包到一個文件名含vendors的bundle中，如果你的項目裏面引用的第三方庫過多，那麼你的vendors就會很臃腫，文件也會變大，網站加載該文件的時候就越耗時，從而影響網站性能。這個時候我們可以考慮把一些比較大的第三方庫從vendors中分離出來，或者直接配置cdn。這裏我們主要來講如何在cli4中單獨打包第三方庫文件從而實現bundle分割，減小vendors文件體積的目的。有關cli4 配置cdn可以參考筆者的另外一篇博客 vue cli4 配置資源CDN

    下面的配置都在vue.config.js文件中進行，這是cli指定的的配置文件，如果項目沒有這個文件，就自己創建一個。接下來我們需要在configureWebpack中配置splitChunks，下面是配置的相關代碼：

configureWebpack: config => {
    config.optimization = {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vue: {
            name: 'vue',
            test: /[\\/]node_modules[\\/]vue[\\/]/,
            priority: -10
          },
          vuex: {
            name: 'vuex',
            test: /[\\/]node_modules[\\/]vuex[\\/]/,
            priority: -10
          },
          'vue-router': {
            name: 'vue-router',
            test: /[\\/]node_modules[\\/]vue-router[\\/]/,
            priority: -10
          },
          'element-ui': {
            name: 'element-ui',
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            priority: -10
          },
          'vendors': {
            name: 'vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -20
          }
        }
      }
    }
  }

     configureWebpack有對象和函數兩種寫法，這裏選了函數的寫法。沒什麼特別的就是個人習慣而已。chunks: 'all'是指對於所有的塊進行優化，他還有另外兩個選項initial和async, 這裏不做展開。最主要是配置cacheGroups裏面的內容，比如我們拿分離element-ui爲例：

'element-ui': {
   name: 'element-ui',
   test: /[\\/]node_modules[\\/]element-ui[\\/]/,
   priority: -10
}

     其中name是指定打包之後的bundle文件名(如果無name配置，最後的bundle文件名就是外層的element-ui加上入口文件的組合，例如element-ui~index），test則是匹配需要分離的第三方庫所在的目錄，element-ui所在的目錄是在/node_modules/element-ui/，不清楚的朋友可以自己去node_modules文件夾下搜索。priority指定打包的優先級，這個值必須要比vendors的打包優先級大，不然便無法成功分離指定的第三方庫，他仍然會被打包到vendors中）下面放送vue.config.js的所有配置內容，如下：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  publicPath: '/',
  filenameHashing: true,
  productionSourceMap: process.env.NODE_ENV !== 'production',
  devServer: {
    port: 8077
  },
  chainWebpack: config => {
    config.resolve.symlinks(true)
    if (process.env.VUE_APP_TYPE === 'analyze') {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
        {
          analyzerMode: "static"
        }
      ])
    }
  },
  configureWebpack: config => {
    config.optimization = {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vue: {
            name: 'vue',
            test: /[\\/]node_modules[\\/]vue[\\/]/,
            priority: -10
          },
          vuex: {
            name: 'vuex',
            test: /[\\/]node_modules[\\/]vuex[\\/]/,
            priority: -10
          },
          'vue-router': {
            name: 'vue-router',
            test: /[\\/]node_modules[\\/]vue-router[\\/]/,
            priority: -10
          },
          'element-ui': {
            name: 'element-ui',
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            priority: -10
          },
          'vendors': {
            name: 'vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -20
          }
        }
      }
    }
  },
  pages: {
    index: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'sass-admin',
      chunks: ['vendors', 'vue', 'vuex', 'vue-router', 'element-ui', 'index']
    }
  }
}

    大家重點關注 configureWebpack的配置內容即可，其餘部分配置是筆者自己demo的配置。需要注意的是一定不要忘了把分離出來的bundle加入到pages中的chunks裏面，這裏的chunks指定了入口所需要加載的js文件。

    在cacheGroups中配置完需要分離的庫後，我們可以進行打包看一下最後的結果。下面是配置前後的打包分析圖和本地dist文件下的文件情況。

    配置前的打包分析圖和dist文件夾下的內容：

 

    配置後的打包分析圖和dist文件夾下的內容： 

    可以看到，我們通過配置configureWebpack的splitChunks成功的把element-ui，vue-router,vue,vuex這些第三方庫從vendors中分離了出來，達到了我們的目的。

    configureWebpack其實是對cli內部的webpack進行配置，打包時cli會通過webpack-merge把configureWebpack的內容與最終的webpack配置進行合併。所有webpack支持的配置都可以在configureWebpack裏面配置。splitChunks來源於SplitChunksPlugin這個插件(cli內部有集成，這也符合cli開箱即用的理念)，有關splitChunks更多的內容大家可以查看split-chunks-plugin的文檔。介紹到此結束，如有疑問可於下方留言。