使用哪些工具來追蹤及分析 Webpack 套裝組合
即使您已設定 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
或推送程式碼,就會看到輸出檔案是否足夠小:
或者,如果發生失敗的情況:
延伸閱讀
- Alex Russell 關於我們應鎖定的實際載入時間
分析套件的大小
建議您深入瞭解套件,瞭解有哪些模組佔用空間。歡迎使用 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
如何影響大小