iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
Modern Web

Webpack with ASP.NET MVC系列 第 23

優化 Webpack 打包檔案大小

  • 分享至 

  • xImage
  •  

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

優化前分析結果

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

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

透過下面的設定,獨立打包 VendorCommons

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


上一篇
提取 Runtime & Manifest
下一篇
Webpack 優化總結
系列文
Webpack with ASP.NET MVC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言