監控及分析應用程式

使用哪些工具追蹤及分析 webpack 套件

Ivan Akulov

即使您設定 webpack 盡可能縮減應用程式大小，仍須追蹤應用程式大小，並瞭解其中包含的內容。否則，您可能會安裝依附元件，導致應用程式大小增加一倍，但您甚至不會注意到！

本節說明有助於瞭解套件的工具。

追蹤套件大小

如要監控應用程式大小，請在開發期間使用 webpack-dashboard，並在 CI 上使用 bundlesize。

webpack-dashboard

webpack-dashboard 會顯示依附元件大小、進度和其他詳細資料，提升 webpack 輸出內容的實用性。以下是新版介面：

這個資訊主頁有助於追蹤大型依附元件，只要新增依附元件，就會立即顯示在「模組」部分！

如要啟用，請安裝 webpack-dashboard 套件：

npm install webpack-dashboard --save-dev

並將外掛程式新增至設定的 plugins 區段：

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

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

如果您使用以 Express 為基礎的開發伺服器，請改用 compiler.apply()：

compiler.apply(new DashboardPlugin());

歡迎使用資訊主頁，找出可能的改善空間！舉例來說，您可以捲動「模組」部分，找出過大的程式庫，並改用較小的替代方案。

bundlesize

bundlesize 會驗證 webpack 資產是否超過指定大小。將其與 CI 整合，在應用程式過大時收到通知：

如要設定這項功能，請按照下列步驟操作：

瞭解大小上限

1. 請盡可能縮小應用程式。執行正式版建構作業。

2. 將 bundlesize 區段新增至 package.json，並加入下列內容：

   // 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: