本頁面由 Cloud Translation API 翻譯而成。

監控及分析應用程式

追蹤及分析 webpack 套件的工具

Ivan Akulov

即使您已設定 webpack，盡可能縮減應用程式大小，還是建議您追蹤並瞭解 webpack 包含的內容。否則，您可以安裝會使應用程式大小增加一倍的依附元件，而且使用者不會察覺到！

本節將說明有助於您瞭解套件的工具。

追蹤套件大小

如要監控應用程式大小，請在開發期間使用 webpack-dashboard，並在 CI 上使用 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

bundlesize 會驗證 webpack 素材資源是否未超過指定大小。整合應用程式與持續整合，在應用程式過大時收到通知：

如要設定這項功能，請按照下列步驟操作：

瞭解最大尺寸

請盡可能縮小應用程式大小。執行正式版。

將 bundlesize 區段新增至 package.json，並加入以下內容：

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

使用 npx 執行 bundlesize：

npx bundlesize

這會列印每個檔案的壓縮大小：

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

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

啟用 bundlesize
將 bundlesize 套件安裝為開發依附元件：
```
npm install bundlesize --save-dev
```

在 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",
    }
  ]
}

新增 npm 指令碼來執行檢查：

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

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

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

或者，如果發生失敗的情況，請執行下列操作：

分析套裝組合過大的原因

您可能需要深入研究套件，看看哪些模組占用空間。歡迎使用 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 大小，因為這會更接近實際使用者體驗；請使用左側的側欄來切換大小。

這份報表中應留意的重點內容：

依附元件過大。為什麼這麼大？是否有較小的替代方案 (例如Preact (而非 React)？您是否使用其中包含的所有程式碼 (例如 Moment.js 包含許多不常使用，可能會遭到捨棄的語言代碼？
重複的依附元件。您是否在多個檔案中看到同一個程式庫重複出現？(例如，使用 webpack 4 中的 optimization.splitChunks.chunks 選項，或 webpack 3 中的 CommonsChunkPlugin，將其移至一般檔案)。或者，套件是否包含同一個程式庫的多個版本？
類似的依附元件。是否有類似的程式庫可執行類似的工作？(例如 moment 和 date-fns 或 lodash 和 lodash-es)。請盡量使用單一工具。

另外，請參閱 Sean Larkin 的webpack 套件精彩分析。

總結

使用 webpack-dashboard 和 bundlesize 隨時掌握應用程式大小
深入瞭解 webpack-bundle-analyzer 如何影響大小