- 原文地址： 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 中，就可以在應用過大的時候收到提醒。
配置:
確定大小上限
-
先優化應用，讓它儘可能小，然後執行生產環境構建；
-
在
package.json中增加bundlesize欄位的配置，如下：// 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% 的 buffer 可以保證既不妨礙你日常開發，又可以在它的體積增長過快的時候向你報警。
啟用 bundlesize
-
安裝
bunlesize包作為開發依賴: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 ，以便在每次 push 的時候執行
npm run check-size（如果你在 github 上開發專案的話還可以在 github 中整合bundlesize)。
就是這樣！現在如果你執行 npm run check-size 或者 push 程式碼，你會看到輸出檔案是否足夠小。
如果是失敗的情況：
擴充套件閱讀:
- Alex Russell 關於現實世界中我們應該追求的載入時間
分析 bundle 為什麼這麼大
你可能想要深入研究 bundle，來分析哪些模組佔用了空間。請看 webpack-bundle-analyzer:
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 壓縮之後的大小，因為這會更接近真實使用者的體驗。可以在側邊欄切換大小型別。
⭐️注意 : 如果你使用 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。
總結
- 使用 webpack-dashboard 和 bundlesize 來持續關注你的應用大小。
- 用
webpack-bundle-analyzer來深究應用大小的構成
結論
- 原文地址： conclusion
- 原文作者： Ivan Akulov
- 譯文地址： 結論
- 譯者： 閆萌
- 校對者： 周文康、楊建
總結:
- 減少不必要的位元組。 壓縮所有資源，去除無用程式碼，謹慎新增依賴。
- 通過路由分離程式碼。 只載入當前真正需要的資源，其他的資源延遲載入。
- 快取程式碼。 應用中某部分程式碼的更新頻率比其他部分低。可以將這部分程式碼剝離，以便只在必要時重新載入。
- 持續關注應用大小。 使用像 webpack-dashboard 和 webpack-bundle-analyzer 這類的工具來了解應用的大小。然後每隔幾個月重新檢查一下應用的效能。
Webpack 不是唯一一個可以幫助你讓應用變得更快的工具。還可以考慮讓你的應用變成一個漸進式 web 應用（Progressive Web App），從而獲得更好的體驗，並且使用像 Lighthouse 這樣的自動分析工具來獲得改進意見。
別忘了去閱讀 webpack 文件 - 那裡還有大量有用的資訊。
同時記得用 training 專案來練習哦！
更多分享，請關注YFE:
