使用WebPack執行性能預算

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

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

自定義預算

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

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

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

超出閾值時顯示錯誤

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

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

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

排除某些資源

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

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

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

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

限制

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

總結

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

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

以上是使用WebPack執行性能預算的詳細內容。更多資訊請關注PHP中文網其他相關文章！