Webpack 會合併所有匯入的檔案,並將其封裝成一或多個輸出檔案 (稱為「套件」)。套件很方便,但隨著應用程式成長,套件也會變大。您需要監控套件大小,確保套件不會過大,以免影響應用程式的載入時間。Webpack 支援根據資產大小設定效能預算,並監控套件大小。
如要查看實際運作情形,請參閱以下應用程式,瞭解距離新年還有幾天。 這個範例是使用 React 和 moment.js 建構而成。 (就像越來越多實體應用程式依賴架構和程式庫一樣。😉)
測量
本程式碼研究室已包含使用 webpack 組合的應用程式。
- 按一下「Remix to Edit」,即可編輯專案。
- 按一下「終端機」 (注意:如果沒有顯示「終端機」按鈕,可能需要使用全螢幕選項)。
- 如要取得素材資源及其大小的顏色編碼清單,請在控制台中輸入
webpack
。
webpack
主要套件以黃色醒目顯示,因為它大於 244 KiB (250 KB)。

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

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

設定自訂成效預算
適當的效能預算取決於專案性質。 建議您自行研究。 根據經驗法則,壓縮/縮減後的重要路徑資源應小於 170 KB。
在這個簡單的示範中,請嘗試更保守的做法,將預算設為 100 KB (97.7 KiB)。在 webpack.config.js
中新增下列項目:
module.exports = {
//...
performance: {
maxAssetSize: 100000,
maxEntrypointSize: 100000,
hints: "warning"
}
};
新的效能預算以 位元組為單位:
- 個別素材資源 100000 個位元組 (maxAssetSize)
- 進入點為 100000 個位元組 (maxEntrypointSize)
在本例中,只有一個套件,同時也是進入點。
提示可能的值包括:
warning
(預設):顯示黃色警告訊息,但建構作業會通過。建議在開發環境中使用。error
:顯示紅色錯誤訊息,但建構作業仍會通過。建議您在正式版建構作業中採用這項設定。false
:不會顯示任何警告或錯誤。

最佳化
效能預算的目的是在效能問題變得難以修正前,向您發出警告。建構應用程式的方法不只一種,有些技巧可加快載入速度。(其中許多項目都記錄在這份 JavaScript 最佳化文件中。🤓)
架構和程式庫可讓開發人員更輕鬆地工作,但終端使用者並不在意應用程式的建構方式,只在乎應用程式是否實用且快速。如果發現自己超出效能預算,就該考慮進行最佳化。
在現實世界中,大型用戶端架構通常難以替換,因此請務必明智地使用。只要稍加研究,您通常就能找到熱門程式庫的替代方案,而且這些替代方案的體積較小,但功能同樣強大 (date-fns 是 moment.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 中設定效能預算只需要幾行程式碼,而且如果您 (不小心) 新增大型依附元件,系統就會發出警告。俗話說「眼不見為淨」,但 webpack 可確保您隨時瞭解效能影響。