性能配置

这些选项允许你控制 webpack 如何通知你关于超过特定文件大小限制的资源（assets）和入口点（entry points）。此功能的灵感来源于 webpack Performance Budgets 这一想法。

performance

object

配置性能提示（performance hints）的显示方式。例如，如果你有一个超过 250kb 的资源，webpack 将发出警告通知你。

performance.assetFilter

function(assetFilename) => boolean

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

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

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

export default {
  // ...
  performance: {
    assetFilter(assetFilename) {
      return assetFilename.endsWith(".js");
    },
  },
};

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

performance.hints

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

打开/关闭提示。此外，告诉 webpack 在发现提示时抛出错误或警告。

performance.hints 的默认值取决于 mode：

假设创建了一个超过 250kb 的资源：

export default {
  // ...
  performance: {
    hints: false,
  },
};

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

export default {
  // ...
  performance: {
    hints: "warning",
  },
};

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

export default {
  // ...
  performance: {
    hints: "error",
  },
};

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

performance.maxAssetSize

number = 250000

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

export default {
  // ...
  performance: {
    maxAssetSize: 100000,
  },
};

performance.maxEntrypointSize

number = 250000

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

export default {
  // ...
  performance: {
    maxEntrypointSize: 400000,
  },
};