效能

這些選項允許您控制 webpack 如何通知您超過特定檔案大小限制的資產和進入點。此功能的靈感來自 webpack 效能預算 的概念。

performance

物件

設定效能提示的顯示方式。例如,如果您有一個超過 250kb 的資產,webpack 會發出一個警告通知您這件事。

performance.assetFilter

function(assetFilename) => boolean

此屬性允許 webpack 控制哪些檔案用於計算效能提示。預設函式為

function assetFilter(assetFilename) {
  return !/\.map$/.test(assetFilename);
}

您可以透過傳入您自己的函式來覆寫此屬性

module.exports = {
  //...
  performance: {
    assetFilter: function (assetFilename) {
      return assetFilename.endsWith('.js');
    },
  },
};

上述範例只會根據 .js 檔案提供效能提示。

performance.hints

字串 = 'warning': 'error' | 'warning' 布林值: false

開啟/關閉提示。此外,告訴 webpack 在找到提示時擲回錯誤或警告。

假設建立的資產超過 250kb

module.exports = {
  //...
  performance: {
    hints: false,
  },
};

不會顯示提示警告或錯誤。

module.exports = {
  //...
  performance: {
    hints: 'warning',
  },
};

會顯示警告,通知您有大型資產。我們建議在開發環境中使用類似這樣的設定。

module.exports = {
  //...
  performance: {
    hints: 'error',
  },
};

會顯示錯誤,通知您有大型資產。我們建議在製作版本時使用 hints: "error",以協助防止部署過大的製作套件,影響網頁效能。

performance.maxAssetSize

數字 = 250000

資產是 webpack 發出的任何檔案。此選項控制 webpack 何時根據個別資產大小(以位元組為單位)發出效能提示。

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
  },
};

performance.maxEntrypointSize

數字 = 250000

進入點代表特定進入點在初始載入時間會使用的所有資產。此選項控制 webpack 何時應根據最大進入點大小(以位元組為單位)發出效能提示。

module.exports = {
  //...
  performance: {
    maxEntrypointSize: 400000,
  },
};

5 貢獻者

thelarkinntbroadleybyzykmadhavarshneyEugeneHlushko