Webpack Performance

這些選項(xiàng)可以控制 webpack 如何通知「資源(asset)和入口起點(diǎn)超過指定文件限制」。 此功能受到 webpack 性能評(píng)估的啟發(fā)。

performance

?object?

配置如何展示性能提示。例如，如果一個(gè)資源超過 250kb，webpack 會(huì)對此輸出一個(gè)警告來通知你。

performance.assetFilter

?function(assetFilename) => boolean?

此屬性允許 webpack 控制用于計(jì)算性能提示的文件。默認(rèn)函數(shù)如下：

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

你可以通過傳遞自己的函數(shù)來覆蓋此屬性：

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

以上示例將只給出 ?.js? 文件的性能提示。

performance.hints

?string = 'warning': 'error' | 'warning' boolean: false?

打開/關(guān)閉提示。此外，當(dāng)找到提示時(shí)，告訴 webpack 拋出一個(gè)錯(cuò)誤或警告。此屬性默認(rèn)設(shè)置為 "warning"。

給定一個(gè)創(chuàng)建后超過 250kb 的資源：

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

不展示警告或錯(cuò)誤提示。

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

將展示一條警告，通知你這是體積大的資源。在開發(fā)環(huán)境，我們推薦這樣。

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

將展示一條錯(cuò)誤，通知你這是體積大的資源。在生產(chǎn)環(huán)境構(gòu)建時(shí)，我們推薦使用 hints: "error"，有助于防止把體積巨大的 bundle 部署到生產(chǎn)環(huán)境，從而影響網(wǎng)頁的性能。

performance.maxAssetSize

?number = 250000?

資源(asset)是從 webpack 生成的任何文件。此選項(xiàng)根據(jù)單個(gè)資源體積(單位: bytes)，控制 webpack 何時(shí)生成性能提示。

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

performance.maxEntrypointSize

?number = 250000?

入口起點(diǎn)表示針對指定的入口，對于所有資源，要充分利用初始加載時(shí)(initial load time)期間。此選項(xiàng)根據(jù)入口起點(diǎn)的最大體積，控制 webpack 何時(shí)生成性能提示。

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