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

監控及分析應用程式

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

Ivan Akulov

即使您已設定 webpack，盡可能縮減應用程式大小，還是建議您追蹤並瞭解 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

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

如何設定這項功能：

瞭解最大尺寸

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

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

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

使用 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

為每個大小各加 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"
  }
}

設定 CI，讓 CI 在每次推送時執行 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 大小，因為較接近實際使用者 experience;您可以使用左邊側欄來切換大小

這份報表的重點如下：

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

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

總結

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