監控及分析應用程式

該使用哪些工具來追蹤及分析 Webpack 套件

伊凡.阿庫洛夫 (Ivan Akulov)
Ivan Akulov

即使您將 Webpack 設定為盡可能縮小,仍必須持續追蹤並瞭解其中包含的內容。否則,您可以安裝依附元件,如此一來,應用程式就會放大一倍,甚至不會察覺!

本節介紹的工具可協助您瞭解套件。

追蹤套裝組合大小

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

Webpack 資訊主頁

webpack-dashboard 可根據依附元件、進度和其他詳細資料,強化 Webpack 的輸出。以下是新版介面:

webpack-dashboard 輸出內容的螢幕截圖

這個資訊主頁有助於追蹤大型依附元件;只要新增一個依附元件,就會顯示在「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) 整合,以便在應用程式過大時接收通知:

螢幕截圖:GitHub 上提取要求的「CI」部分。CI 工具中有一個 Bundlesize 輸出

設定方法如下:

查看最大尺寸

  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: 31.49KB
    
  4. 請為每種大小加上 10-20% 的結果,這樣沒有上限。這個 10-20% 的邊界可讓您照常開發應用程式,並在應用程式大小增加時發出警告。

    啟用 bundlesize

  5. 安裝 bundlesize 套件做為開發依附元件:

    npm install bundlesize --save-dev
    
  6. package.jsonbundlesize 區段中,指定具體的大小上限。針對某些檔案 (例如圖片),建議您指定每種檔案類型的大小上限,而非每個檔案類型:

    // package.json
    {
      "bundlesize": [
        {
          "path": "./dist/*.png",
          "maxSize": "16 kB",
        },
        {
          "path": "./dist/main.*.js",
          "maxSize": "20 kB",
        },
        {
          "path": "./dist/vendor.*.js",
          "maxSize": "35 kB",
        }
      ]
    }   
    
  7. 新增 npm 指令碼來執行檢查:

    // package.json
    {
      "scripts": {
        "check-size": "bundlesize"
      }
    }
    
  8. 設定 CI,在每次推送時執行 npm run check-size。(如果您是在其中開發專案,請bundlesize 與 GitHub 整合)。

這樣就大功告成了!現在,如果您執行 npm run check-size 或推送程式碼,則可看到輸出檔案是否夠小:

Bundlesize 輸出內容的螢幕截圖。所有建構結果都會標示「通過」

失敗時:

Bundlesize 輸出內容的螢幕截圖。部分建構結果會標示為「失敗」

其他資訊

分析軟體包為何如此龐大

建議您深入瞭解套件,瞭解有哪些模組佔用空間。webpack-bundle-analyzer 隆重登場:

(來自 github.com/webpack-contrib/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) 將其移至通用檔案。)或者,組合是否有同一個程式庫的多個版本?
  • 類似的依附元件:是否也有類似的程式庫執行相同的工作?(例如 momentdate-fns,或是 lodashlodash-es)。請持續使用單一工具。

另請參閱 Sean Larkin 的優質 Webpack 套件分析

總結

  • 使用 webpack-dashboardbundlesize 隨時掌握應用程式的大小
  • 深入瞭解運用 webpack-bundle-analyzer 建構出規模的因素