性能

这些选项允许你控制 webpack 如何通知你超出特定文件限制的资产和入口点。此功能受到 webpack 性能预算理念的启发。

`performance`

object

配置如何显示性能提示。例如，如果你的资产超过 250KB，webpack 将发出警告通知你。

function(assetFilename) => boolean

此属性允许 webpack 控制用于计算性能提示的文件。默认函数为

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

你可以通过传入自己的函数来覆盖此属性

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

上面的示例将仅根据 .js 文件提供性能提示。

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

开启/关闭提示。此外，当发现提示时，指示 webpack 抛出错误或警告。

假设创建了一个超过 250KB 的资产

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

不显示任何提示警告或错误。

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

将显示警告，通知你存在大资产。我们建议在开发环境中使用类似这样的配置。

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

将显示错误，通知你存在大资产。我们建议在生产构建中使用 hints: "error"，以帮助防止部署过大的生产包，从而影响网页性能。

number = 250000

资产是 webpack 输出的任何文件。此选项控制 webpack 何时根据单个资产的大小（以字节为单位）发出性能提示。

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

number = 250000

入口点表示特定入口在初始加载时将使用的所有资产。此选项控制 webpack 何时根据最大入口点大小（以字节为单位）发出性能提示。

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

« 上一页