現(xiàn)代 Web 應用不再依賴單一的龐大 JavaScript 包。研究表明，較大的包會增加內(nèi)存使用和 CPU 負載，尤其是在中低端移動設備上。Webpack 提供了多種功能來減小包大小并控制資源加載優(yōu)先級，其中最重要的是代碼分割和性能提示。代碼分割將代碼分成多個包，按需或并行加載；性能提示在構建時檢測包大小是否超過指定閾值，以便進行優(yōu)化或刪除不必要的代碼。

Webpack 默認情況下，當資源大小或入口點超過 250KB (244KiB) 時會發(fā)出警告，但您可以通過 webpack.config.js 文件中的 performance 對象配置性能提示的顯示方式和大小閾值。本文將介紹如何利用此功能作為防止性能下降的第一道防線。

自定義預算

默認的資源和入口點大小閾值可能并不總是符合您的需求，但可以進行配置。例如，一個小型博客的預算可能是資源和入口點各 50KB (48.8KiB)。webpack.config.js 中的相關設置如下：

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
  }
};

maxAssetSize 和 maxEntrypointSize 屬性分別控制資源和入口點的閾值大小（單位為字節(jié)）。maxEntrypointSize 確保從 entry 對象中列出的文件（通常是 JavaScript 或 Sass 文件）創(chuàng)建的包不超過指定閾值；maxAssetSize 對 Webpack 生成的其他資源（例如圖像、字體等）強制執(zhí)行相同的限制。

超出閾值時顯示錯誤

Webpack 默認在超出預算閾值時發(fā)出警告。這對于開發(fā)環(huán)境足夠了，但對于生產(chǎn)環(huán)境則不足。您可以通過將 hints 屬性添加到 performance 對象并將其設置為 'error' 來觸發(fā)錯誤：

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
  }
};

hints 屬性的其他有效值為 'warning' 和 false。false 將完全禁用警告，即使超過了指定的限制。不建議在生產(chǎn)模式下使用 false。

排除某些資源

Webpack 對其生成的每種類型的資源都強制執(zhí)行大小閾值。如果任何一個資源超過了指定的限制，都會拋出錯誤。例如，如果配置 Webpack 處理圖像，那么只要其中一個圖像超過了閾值，就會出現(xiàn)錯誤。

可以使用 assetFilter 屬性來控制用于計算性能提示的文件：

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
    assetFilter: function(assetFilename) {
      return !assetFilename.endsWith('.jpg');
    },
  }
};

這告訴 Webpack 在運行性能提示計算時，排除任何以 .jpg 結尾的文件。它能夠使用更復雜的邏輯來滿足各種環(huán)境、文件類型和其他資源的條件。

限制

目前的一個限制是，相同的預算閾值應用于所有資源和入口點。換句話說，尚無法根據(jù)需要設置多個預算，例如為 JavaScript、CSS 和圖像文件設置不同的限制。不過，已經(jīng)有開放的 pull request 應該會移除此限制。

總結

在項目開始時設置并強制執(zhí)行性能預算非常有用。它會提醒您注意依賴項的大小，并鼓勵您尋找更輕量級的替代方案，以避免超出預算。

但是，性能預算并不止于此！資源大小只是影響性能的眾多因素之一，因此仍需要做更多工作來確保提供最佳體驗。運行 Lighthouse 測試是了解其他指標以及改進建議的好方法。

以上是使用WebPack執(zhí)行性能預算的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！