該使用哪些工具來追蹤及分析 Webpack 套件
即使您將 Webpack 設定為盡可能縮小,仍必須持續追蹤並瞭解其中包含的內容。否則,您可以安裝依附元件,如此一來,應用程式就會放大一倍,甚至不會察覺!
本節介紹的工具可協助您瞭解套件。
追蹤套裝組合大小
如要監控應用程式大小,請在開發期間使用 webpack-dashboard,並在 CI 上使用bundlesize。
Webpack 資訊主頁
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()
:
compiler.apply(new DashboardPlugin());
您可以自由測試資訊主頁,找出哪些地方有待改進!舉例來說,您可以捲動「Modules」區段,找出哪些程式庫過大,且可用較小的替代項目取代。
Bundlesize
bundlesize 會驗證 webpack 資產未超過指定大小。將其與持續整合 (CI) 整合,以便在應用程式過大時接收通知:
設定方法如下:
查看最大尺寸
最佳化應用程式,盡可能縮小尺寸。執行正式版本。
將
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,在每次推送時執行
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 大小符合實際使用者體驗,您可能會想比較兩者的大小;使用左邊的側欄可切換大小。
報表重點如下:
- 大型依附元件:為什麼尺寸這麼大?但有較小的替代方案 (例如而非 React)?您使用的程式碼是否全部使用 (例如Moment.js 包含許多不常使用且可能會遭到捨棄的語言代碼?
- 重複的依附元件。不同的檔案是否重複出現同一個程式庫?(請使用
optimization.splitChunks.chunks
選項 (例如 webpack 4 中的optimization.splitChunks.chunks
選項,或在 webpack 3 中的CommonsChunkPlugin
) 將其移至通用檔案。)或者,組合是否有同一個程式庫的多個版本? - 類似的依附元件:是否也有類似的程式庫執行相同的工作?(例如
moment
和date-fns
,或是lodash
和lodash-es
)。請持續使用單一工具。
另請參閱 Sean Larkin 的優質 Webpack 套件分析。
總結
- 使用
webpack-dashboard
和bundlesize
隨時掌握應用程式的大小 - 深入瞭解運用
webpack-bundle-analyzer
建構出規模的因素