之前介紹了 Webpack-Dll-Plugin HappPack 來優化 Webpack 打包速度。今天要介紹的是優化 Webpack Bundle 體積大小，首先使用之前介紹的 Webpack-Bundle-Analyzer 來觀察 Bundle 檔案結構。

優化前分析結果

右邊是專案的業務程式碼，我馬賽克掉了 XD

從分析圖可以看出 Commons 非常大一包，幾乎占了整體的三分之二，而且有很大一部分是第三方套件。因此優化的第一步，就是把 node_modules 的第三方套件獨立出來。

透過下面的設定，獨立打包 Vendor 與 Commons

webpack.common.js

module.export = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'Vendor',
          chunks: 'all',
          test: /node_modules/,
        },
        common: {
          name: 'Commons',
          chunks: 'initial',
          minChunks:  2,
        }
      }
    }
  }
}

再次分析打包成果

Vendor 拉出來獨立打包後，Commons 瘦身了不少，這樣對於頁面的緩存也比較有幫助。Vendor 獨立出來之後，發現到 moment 底下的 locale 也占了不少空間，由於 locale 是多國語言使用的設定，基本上大部分我們都用不到，因此我們直接把它 Ignore。

webpack.common.js

module.export = {
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}

透過 IgnorePlugin 移除 locale 後再次分析檔案結構

Ignore Moment locale

可以看到移除 locale 後，moment 輕量了不少。透過視覺化的打包分析工具來檢查檔案結構相當的方便，大原則就是，第一眼看到什麼，就從它開始優化起 XD