這些選項允許您控制 webpack 如何通知您超過特定檔案大小限制的資產和進入點。此功能的靈感來自 webpack 效能預算 的概念。
performance
物件
設定效能提示的顯示方式。例如,如果您有一個超過 250kb 的資產,webpack 會發出一個警告通知您這件事。
function(assetFilename) => boolean
此屬性允許 webpack 控制哪些檔案用於計算效能提示。預設函式為
function assetFilter(assetFilename) {
return !/\.map$/.test(assetFilename);
}
您可以透過傳入您自己的函式來覆寫此屬性
module.exports = {
//...
performance: {
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js');
},
},
};
上述範例只會根據 .js
檔案提供效能提示。
字串 = 'warning': 'error' | 'warning'
布林值: false
開啟/關閉提示。此外,告訴 webpack 在找到提示時擲回錯誤或警告。
假設建立的資產超過 250kb
module.exports = {
//...
performance: {
hints: false,
},
};
不會顯示提示警告或錯誤。
module.exports = {
//...
performance: {
hints: 'warning',
},
};
會顯示警告,通知您有大型資產。我們建議在開發環境中使用類似這樣的設定。
module.exports = {
//...
performance: {
hints: 'error',
},
};
會顯示錯誤,通知您有大型資產。我們建議在製作版本時使用 hints: "error"
,以協助防止部署過大的製作套件,影響網頁效能。
數字 = 250000
資產是 webpack 發出的任何檔案。此選項控制 webpack 何時根據個別資產大小(以位元組為單位)發出效能提示。
module.exports = {
//...
performance: {
maxAssetSize: 100000,
},
};
數字 = 250000
進入點代表特定進入點在初始載入時間會使用的所有資產。此選項控制 webpack 何時應根據最大進入點大小(以位元組為單位)發出效能提示。
module.exports = {
//...
performance: {
maxEntrypointSize: 400000,
},
};