使用哪些工具來追蹤及分析 Webpack 套裝組合
即使您將 Webpack 設定為盡可能縮小應用程式的大小,仍然必須 追蹤並瞭解其中包含的內容否則,您可以安裝依附元件 應用程式變得兩倍大,使用者甚至不會注意到它!
本節介紹的工具可協助您瞭解套件。
追蹤套裝組合大小
如要監控應用程式大小,請使用 webpack-dashboard bundlesize 的角色。
webpack-dashboard
webpack-dashboard 強化 Webpack 輸出內容 當中包含依附元件大小、進度和其他詳細資料以下是新版介面:
![webpack-dashboard 輸出內容的螢幕截圖](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=19&hl=zh-tw)
這個資訊主頁可協助您追蹤大型的依附元件。新增完成後,您就會立即在 「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 資產的大小 指定的大小整合應用程式與持續整合,在應用程式過大時收到通知:
![GitHub 上提取要求的「CI」部分的螢幕截圖。9 月
CI 工具提供 Bundlesize 輸出](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=19&hl=zh-tw)
如何設定這項功能:
查看大小上限
將應用程式最佳化,盡可能縮小。執行實際工作環境版本。
在
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% 的利潤可讓您 照常開發應用程式,並在應用程式大小過大時發出警告。
啟用「
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
或推送程式碼,您會看到輸出檔案
夠小:
![bundlesize 輸出內容的螢幕截圖。所有版本
結果會標示為「通過」](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=19&hl=zh-tw)
或發生錯誤時:
![bundlesize 輸出內容的螢幕截圖。部分版本
結果會標示為「失敗」](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=19&hl=zh-tw)
延伸閱讀
- Alex Russell 在實際載入時間方面 目標
分析套裝組合為何過大
建議您深入瞭解套件,瞭解有哪些模組佔用空間。Meet 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 大小,因為較接近實際使用者 經驗;您可以使用左邊側欄來切換大小
這份報表的重點如下:
- 大型依附元件。為什麼這麼大?是否有較小型的替代選項 (例如預防 而不是 React)?您是否要使用其中包含的所有程式碼 (例如Moment.js 包含多個語言代碼 )?
- 重複的依附元件。您是否在多個檔案中看到同一個程式庫重複出現?(使用例如
「
optimization.splitChunks.chunks
」選項 (位於 webpack 4 或CommonsChunkPlugin
中) 。或者,這個組合是否包含多個版本 同一個程式庫? - 類似的依附元件。是否有類似程式庫的工作大致相同?(例如:
moment
和date-fns
,或lodash
和lodash-es
)。請嘗試使用單一工具。
你也可以參考 Sean Larkin 針對Webpack 提供的絕佳分析結果 套裝組合。
總結
- 使用
webpack-dashboard
和bundlesize
密切留意應用程式的大小 - 深入瞭解如何運用
webpack-bundle-analyzer
建構應用程式的大小