使用WebPack执行性能预算

现代 Web 应用不再依赖单一的庞大 JavaScript 包。研究表明，较大的包会增加内存使用和 CPU 负载，尤其是在中低端移动设备上。Webpack 提供了多种功能来减小包大小并控制资源加载优先级，其中最重要的是代码分割和性能提示。代码分割将代码分成多个包，按需或并行加载；性能提示在构建时检测包大小是否超过指定阈值，以便进行优化或删除不必要的代码。

Webpack 默认情况下，当资源大小或入口点超过 250KB (244KiB) 时会发出警告，但您可以通过 webpack.config.js 文件中的 performance 对象配置性能提示的显示方式和大小阈值。本文将介绍如何利用此功能作为防止性能下降的第一道防线。

自定义预算

默认的资源和入口点大小阈值可能并不总是符合您的需求，但可以进行配置。例如，一个小型博客的预算可能是资源和入口点各 50KB (48.8KiB)。webpack.config.js 中的相关设置如下：

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
  }
};

maxAssetSize 和 maxEntrypointSize 属性分别控制资源和入口点的阈值大小（单位为字节）。maxEntrypointSize 确保从 entry 对象中列出的文件（通常是 JavaScript 或 Sass 文件）创建的包不超过指定阈值；maxAssetSize 对 Webpack 生成的其他资源（例如图像、字体等）强制执行相同的限制。

超出阈值时显示错误

Webpack 默认在超出预算阈值时发出警告。这对于开发环境足够了，但对于生产环境则不足。您可以通过将 hints 属性添加到 performance 对象并将其设置为 'error' 来触发错误：

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
  }
};

hints 属性的其他有效值为 'warning' 和 false。false 将完全禁用警告，即使超过了指定的限制。不建议在生产模式下使用 false。

排除某些资源

Webpack 对其生成的每种类型的资源都强制执行大小阈值。如果任何一个资源超过了指定的限制，都会抛出错误。例如，如果配置 Webpack 处理图像，那么只要其中一个图像超过了阈值，就会出现错误。

可以使用 assetFilter 属性来控制用于计算性能提示的文件：

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
    assetFilter: function(assetFilename) {
      return !assetFilename.endsWith('.jpg');
    },
  }
};

这告诉 Webpack 在运行性能提示计算时，排除任何以 .jpg 结尾的文件。它能够使用更复杂的逻辑来满足各种环境、文件类型和其他资源的条件。

限制

目前的一个限制是，相同的预算阈值应用于所有资源和入口点。换句话说，尚无法根据需要设置多个预算，例如为 JavaScript、CSS 和图像文件设置不同的限制。不过，已经有开放的 pull request 应该会移除此限制。

总结

在项目开始时设置并强制执行性能预算非常有用。它会提醒您注意依赖项的大小，并鼓励您寻找更轻量级的替代方案，以避免超出预算。

但是，性能预算并不止于此！资源大小只是影响性能的众多因素之一，因此仍需要做更多工作来确保提供最佳体验。运行 Lighthouse 测试是了解其他指标以及改进建议的好方法。

以上是使用WebPack执行性能预算的详细内容。更多信息请关注PHP中文网其他相关文章！