監控及分析應用程式

使用哪些工具來追蹤及分析 Webpack 套裝組合

Ivan Akulov

即使您將 Webpack 設定為盡可能縮小應用程式的大小，仍然必須 追蹤並瞭解其中包含的內容否則，您可以安裝依附元件 應用程式變得兩倍大，使用者甚至不會注意到它！

本節介紹的工具可協助您瞭解套件。

追蹤套裝組合大小

如要監控應用程式大小，請使用 webpack-dashboard bundlesize 的角色。

webpack-dashboard

webpack-dashboard 強化 Webpack 輸出內容 當中包含依附元件大小、進度和其他詳細資料以下是新版介面：

這個資訊主頁可協助您追蹤大型的依附元件。新增完成後，您就會立即在 「Modules」一節！

如要啟用這項功能，請安裝 webpack-dashboard 套件：

npm install webpack-dashboard --save-dev

然後將外掛程式新增至設定的 plugins 區段：

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

或使用 compiler.apply() (如果是以 Express 為基礎的開發伺服器)：

compiler.apply(new DashboardPlugin());

歡迎試用資訊主頁，找出可改善的地方！例如： 捲動「Modules」部分，找出太大且可以取代的程式庫 較小型的替代選項

套裝組合大小

bundlesize 會驗證 webpack 資產的大小 指定的大小整合應用程式與持續整合，在應用程式過大時收到通知：

如何設定這項功能：

查看大小上限

1. 將應用程式最佳化，盡可能縮小。執行實際工作環境版本。

2. 在 package.json 中新增 bundlesize 部分，如下所示 內容：

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. 使用 npx 執行 bundlesize：

   npx bundlesize
   

   即可列印每個檔案的 gzip 壓縮大小：

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. 為每個大小各加 10-20%，這樣就可以取得上限。這個 10-20% 的利潤可讓您 照常開發應用程式，並在應用程式大小過大時發出警告。

   啟用「bundlesize」

5. 安裝 bundlesize 套件做為開發依附元件：

   npm install bundlesize --save-dev
   

6. 在 package.json 的 bundlesize 區段中，指定具體 大小上限。您可以針對部分檔案 (例如圖片) 指定每個檔案的大小上限 而非每個檔案類型：

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. 新增 npm 指令碼以執行檢查：

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. 設定持續整合作業，在每次推送時執行 npm run check-size。(如果您是透過專案開發專案，則請將 bundlesize 與 GitHub 整合)。

這樣就大功告成了！現在，如果執行 npm run check-size 或推送程式碼，您會看到輸出檔案 夠小：

或發生錯誤時：

延伸閱讀

• Alex Russell 在實際載入時間方面 目標

分析套裝組合為何過大

建議您深入瞭解套件，瞭解有哪些模組佔用空間。Meet webpack-bundle-analyzer:

(從 github.com/webpack-contrib/webpack-bundle-analyzer 的螢幕畫面錄製)

webpack-bundle-analyzer 會掃描這個套件，以視覺化呈現其中的內容。使用這份草稿 以視覺化方式找出大型或不必要的依附元件。

如要使用分析工具，請安裝 webpack-bundle-analyzer 套件：

npm install webpack-bundle-analyzer --save-dev

請在 webpack 設定中新增外掛程式：

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

並執行正式環境外掛程式會在瀏覽器中開啟統計資料頁面。

根據預設，統計資料頁面會顯示剖析檔案的大小 (也就是剖析檔 軟體包)。建議你比較 gzip 大小，因為較接近實際使用者 經驗；您可以使用左邊側欄來切換大小

注意： 如果您使用 ModuleConcatenationPlugin，系統可能會合併 webpack-bundle-analyzer 輸出內容中的部分模組，導致報表變得較不詳盡。若您使用此外掛程式，請在分析期間停用。

這份報表的重點如下：

• 大型依附元件。為什麼這麼大？是否有較小型的替代選項 (例如預防 而不是 React)？您是否要使用其中包含的所有程式碼 (例如Moment.js 包含多個語言代碼 )？
• 重複的依附元件。您是否在多個檔案中看到同一個程式庫重複出現？(使用例如 「optimization.splitChunks.chunks」選項 (位於 webpack 4 或 CommonsChunkPlugin 中) 。或者，這個組合是否包含多個版本 同一個程式庫？
• 類似的依附元件。是否有類似程式庫的工作大致相同？(例如： moment 和 date-fns，或 lodash 和 lodash-es)。請嘗試使用單一工具。

你也可以參考 Sean Larkin 針對Webpack 提供的絕佳分析結果 套裝組合。

總結

• 使用 webpack-dashboard 和 bundlesize 密切留意應用程式的大小
• 深入瞭解如何運用 webpack-bundle-analyzer 建構應用程式的大小