譯】Google - 使用 webpack 進行 web 效能優化（三）：監控和分析應用

摘要： 原文地址： monitor and analyze 原文作者： Ivan Akulov 譯文地址： 監控和分析應用 譯者： 泥坤 校對者： 楊建 、 閆蒙 即使你可以通過配置 webpack 使得應用盡可能小，追蹤它並且知道它包含什...

• 原文地址： monitor and analyze
• 原文作者： Ivan Akulov
• 譯文地址： 監控和分析應用
• 譯者： 泥坤
• 校對者： 楊建 、 閆蒙

即使你可以通過配置 webpack 使得應用盡可能小，追蹤它並且知道它包含什麼仍然是很重要的。否則，你可能安裝了一個讓應用大了兩倍的依賴卻渾然不覺。

這節就來講幾個可以幫助你深入分析 bundle 的工具。

追蹤 bundle 的大小

為了監控你的應用大小，可以在開發過程中使用 webpack-dashboard 和在 CI 上使用 bundlesize 。

webpack-dashboard

webpack-dashboard 增強了 webpack 的輸出，包含依賴的大小、進度和其他細節。這是它的介面：

這個看板幫助追蹤大的依賴 —— 如果你增加了一個依賴，那麼你就能夠立刻在 Modules 部分中看到它。

要想使用它，需要安裝依賴包 webpack-dashboard :

npm install webpack-dashboard --save-dev
複製程式碼

然後在 webpack.config.js 檔案中的 plugins 欄位裡增加這個 plugin:

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

module.exports = {
plugins: [
new DashboardPlugin(),
],
};
複製程式碼

如果你使用基於 express 的服務，也可以使用 compiler.apply() :

compiler.apply(new DashboardPlugin());
複製程式碼

盡情地使用 dashboard 來找到可能優化的地方吧！舉個例子，縱覽 Modules 部分可以找到過大的庫，然後用相對小的庫來替代掉它。

bundlesize

bundlesize 校驗 webpack 的資源有沒有超過指定的大小。將它整合到 CI 中，就可以在應用過大的時候收到提醒。

配置:

確定大小上限

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% 的 buffer 可以保證既不妨礙你日常開發，又可以在它的體積增長過快的時候向你報警。

啟用 bundlesize

5. 安裝 bunlesize 包作為開發依賴:

   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. 配置好 CI ，以便在每次 push 的時候執行 npm run check-size （如果你在 github 上開發專案的話還可以 在 github 中整合 bundlesize )。

就是這樣！現在如果你執行 npm run check-size 或者 push 程式碼，你會看到輸出檔案是否足夠小。

如果是失敗的情況：

擴充套件閱讀:

• Alex Russell 關於現實世界中我們應該追求的載入時間

分析 bundle 為什麼這麼大

你可能想要深入研究 bundle，來分析哪些模組佔用了空間。請看 webpack-bundle-analyzer :

(Screen recording from github.com/webpack-con… )

webpack-bundle-analyzer 掃描 bundle 並且建立一個視覺化的結果展示它包含什麼，通過該視覺化介面可以去找大的或者不必要的依賴。

要使用 analyzer，需要安裝 webpack-bundle-analyzer 。

npm install webpack-bundle-analyzer --save-dev
複製程式碼

在 webpack 配置檔案裡增加一個 plugin。

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

module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
複製程式碼

然後執行 production build，外掛會在瀏覽器裡開啟一個統計的頁面。

預設情況下，統計頁面展示的是解析過後的檔案大小。（即出現在 bundle 裡的檔案），你可能想要比較 gzip 壓縮之後的大小，因為這會更接近真實使用者的體驗。可以在側邊欄切換大小型別。

:star:️注意 : 如果你使用 ModuleConcatenationPlugin ，一部分在 webpack-bundle-analyzer 輸出的模組可能會被合併，使得報告的資訊量減少。所以如果你在用這個外掛，在分析的過程中需要將它禁用掉。

以下是希望從報告中得到的資訊：

• 大的依賴為什麼他們那麼大？是否有更小的替代品（例如 Preact 代替 React）？你是否需要其中的全部程式碼？（例如，Moment.js 包含很多並不常使用並可以扔掉的本地化語言環境 ）

• 重複的依賴你是否在多個檔案裡看到相同的依賴？（使用像 webpack4 中的 optimization.splitChunks.chunks 選項或者 webpack3 中的 CommonsChunkPlugin 來將他們移到一個公共檔案裡）或者 bundle 是否包含了同一個庫的多個版本？

• 相似的依賴是否有相似的庫做著差不多的事情？（例如 comment 和 date-fns 或者 lodash 和 lodash-es ）試著統一成單一的工具。

同時，建議看一下 Sean Larkin 的 great analysis of webpack bundles 。