Webpack 會將所有匯入的檔案合併，並封裝至一或多個輸出檔案，稱為套件。套裝組合是不錯的做法，但隨著應用程式擴充，套件也會持續擴增。您必須監控套件大小，以確保套件大小不會過大，並影響應用程式的載入時間。Webpack 支援根據資產大小設定效能預算，方便您監控組合大小。
為了讓你瞭解實際運作情況，這款應用程式能計算剩餘天數至新年之幾天。 此 API 是以 React 和 moment.js 建構。(就像實際應用程式一樣，越來越仰賴架構和程式庫。😉)
測量
本程式碼研究室已包含隨附於 Webpack 的應用程式套件。
- 按一下「Remix to Edit」，讓專案可供編輯。
- 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，您可能需要使用「全螢幕」選項)。
- 如要取得以不同顏色標示的素材資源及其大小清單，請在控制台中輸入
webpack。
webpack
主要套件大小超過 244 KiB (250 KB)，因此以黃色醒目顯示。
根據預設，實際工作環境模式會啟用這些警告，而對於資產和進入點 (頁面初始載入期間使用的所有素材資源組合)，預設閾值為 244 KiB (未壓縮)。
Webpack 不僅會向您發出警告，還會提供相關建議，讓您瞭解如何縮減套件大小。如要進一步瞭解建議技巧，請參閱「網站基礎知識」一文。
設定自訂效能預算
視專案性質而定，合適的效能預算會有所不同。 因此建議您自行研究。 原則上，良好的原則是提供大小不超過 170 KB 的壓縮/壓縮重要路徑資源。
在這個簡單的示範中，請試著採取較保守的做法，並將預算設為 100 KB (97.7 KiB)。在 webpack.config.js 中新增以下內容：
module.exports = {
//...
performance: {
maxAssetSize: 100000,
maxEntrypointSize: 100000,
hints: "warning"
}
};
新的效能預算是以 bytes 設定：
- 個別資產 100000 位元組 (maxAssetSize)
- 100000 個位元組 (用於進入點 (maxEntrypointSize))
而且只有一個組合可做為進入點。
提示可能的值如下：
warning(預設)：顯示黃色的警告訊息，但建構通過。建議您在開發環境中使用這個功能。error：顯示紅色錯誤訊息，但版本仍通過。建議在正式版中使用這項設定。false：系統不會顯示任何警告或錯誤。
最佳化
效能預算的目的是在效能問題太難修正之前發出警告。建構應用程式的方法有很多種，有些技巧可以縮短載入時間。(其中可介紹許多術語，請參閱「最佳化 JavaScript」一文)。🤓)
架構和程式庫可讓開發人員更輕鬆運作，但使用者並不依賴應用程式的建構方式，只須確保功能正常運作且快速。假如您已充分瞭解效能預算，就該想想有哪些可行的最佳化方式。
實際上，大型用戶端架構通常很難替換，因此請務必妥善使用。只要稍加研究，您通常就能找到使用熱門程式庫的較小型替代做法，在這類程式庫中也能正常運作 (例如對 moment.js 來說，date-fns 是不錯的替代方案)。如果架構或程式庫對效能造成顯著影響，有時更合理。
移除未使用的程式碼是改善含有大型第三方程式庫的應用程式的好方法。「移除未使用的程式碼」指南詳細說明此程序，以下提供在不使用 now.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));
現在，將 moment.js 從 package.json 中移除，然後再次在主控台中執行 Webpack，以建構最佳化套件。
好了！您已經賣出 223 KiB (230KB)，但應用程式低於預算。🎉?
監控
在 Webpack 中設定效能預算只需幾行程式碼，每當您 (意外) 新增大量依附元件時，系統就會顯示警告訊息。這句話會「令人無法察覺，不為人知」，但是 Webpack 可以確保您隨時注意效能可能受到的影響。