使用 webpack 設定效能預算

Milica Mihajlija
Milica Mihajlija

Webpack 會合併所有匯入的檔案,並將其封裝成一或多個輸出檔案 (稱為「套件」)。套件很方便,但隨著應用程式成長,套件也會變大。您需要監控套件大小,確保套件不會過大,以免影響應用程式的載入時間。Webpack 支援根據資產大小設定效能預算,並監控套件大小。

如要查看實際運作情形,請參閱以下應用程式,瞭解距離新年還有幾天。 這個範例是使用 Reactmoment.js 建構而成。 (就像越來越多實體應用程式依賴架構和程式庫一樣。😉)

計算距離元旦還有幾天的應用程式

測量

本程式碼研究室已包含使用 webpack 組合的應用程式。

  1. 按一下「Remix to Edit」,即可編輯專案。
  2. 按一下「終端機」 (注意:如果沒有顯示「終端機」按鈕,可能需要使用全螢幕選項)。
  3. 如要取得素材資源及其大小的顏色編碼清單,請在控制台中輸入 webpack
webpack

主要套件以黃色醒目顯示,因為它大於 244 KiB (250 KB)。

Webpack 輸出內容,顯示套裝組合大小為 323 KiB
Webpack 警告您 JS 套件過於龐大 ⚠️

這些警告預設會在正式版模式中啟用,且資產和進入點的預設門檻都是244 KiB 未壓縮 (在網頁初始載入期間使用的所有資產組合)。

Webpack 警告:素材資源超出建議大小上限
Webpack 警告您 JS 套件過於龐大 ⚠️

Webpack 不僅會發出警告,還會提供縮減套件大小的建議。如要進一步瞭解建議的技術,請參閱「Web Fundamentals」。

Webpack 效能最佳化建議
Webpack 效能最佳化建議 💁

設定自訂成效預算

適當的效能預算取決於專案性質。 建議您自行研究。 根據經驗法則,壓縮/縮減後的重要路徑資源應小於 170 KB。

在這個簡單的示範中,請嘗試更保守的做法,將預算設為 100 KB (97.7 KiB)。在 webpack.config.js 中新增下列項目:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

新的效能預算以 位元組為單位:

  • 個別素材資源 100000 個位元組 (maxAssetSize)
  • 進入點為 100000 個位元組 (maxEntrypointSize)

在本例中,只有一個套件,同時也是進入點。

提示可能的值包括:

  1. warning (預設):顯示黃色警告訊息,但建構作業會通過。建議在開發環境中使用。
  2. error:顯示紅色錯誤訊息,但建構作業仍會通過。建議您在正式版建構作業中採用這項設定。
  3. false:不會顯示任何警告或錯誤。
以紅色字型顯示 Webpack 效能錯誤
Webpack 效能提示「錯誤」🚨

最佳化

效能預算的目的是在效能問題變得難以修正前,向您發出警告。建構應用程式的方法不只一種,有些技巧可加快載入速度。(其中許多項目都記錄在這份 JavaScript 最佳化文件中。🤓)

架構和程式庫可讓開發人員更輕鬆地工作,但終端使用者並不在意應用程式的建構方式,只在乎應用程式是否實用且快速。如果發現自己超出效能預算,就該考慮進行最佳化。

在現實世界中,大型用戶端架構通常難以替換,因此請務必明智地使用。只要稍加研究,您通常就能找到熱門程式庫的替代方案,而且這些替代方案的體積較小,但功能同樣強大 (date-fnsmoment.js 的理想替代方案)。有時,如果架構或程式庫會對效能造成重大影響,完全不使用反而更合理。

如果應用程式包含大型第三方程式庫,移除未使用的程式碼是最佳化應用程式的好方法。移除未使用的程式碼指南詳細說明瞭這個程序,以下提供快速重寫倒數程式碼的方法,無須使用 moment.js。

app/components/Countdown.jsx 中移除:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

並刪除這一行:

const moment = require('moment');

這需要一些數學知識,但您可以使用原生 JavaScript 實作相同的倒數計時器:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

現在從 package.json 移除 moment.js,然後再次在控制台中執行 webpack,建構最佳化套件。

大功告成!您已減少 223 KiB (230KB),應用程式大小符合預算。🎉

最佳化後,Webpack 套裝組合大小輸出為 97.7 KiB

監控

在 webpack 中設定效能預算只需要幾行程式碼,而且如果您 (不小心) 新增大型依附元件,系統就會發出警告。俗話說「眼不見為淨」,但 webpack 可確保您隨時瞭解效能影響。