您可能知道，单个单块JavaScript包(曾经是最佳实践)已不再是现代web应用程序的选择。研究表明，更大的捆绑会增加内存使用量和CPU成本，尤其是在中低端移动设备上。
webpack有很多特性可以帮助你实现更小的bundle并控制资源的加载优先级。其中最引人注目的是代码分割，它提供了一种将代码分割成各种bundle的方法，这些bundle可以按需加载或并行加载。另一个是性能提示，它指示发出的包大小何时在构建时跨越指定的阈值，以便您可以进行优化或删除不必要的代码。
webpack生产版本的默认行为是当资产大小或入口点超过250KB (244KiB)时显示警告，但是您可以通过webpack.config.js文件中的performance对象来配置如何显示性能提示和大小阈值。
首先，我们需要设定一个自定义预算
资产和入口点(webpack开始构建包的入口点)的默认大小阈值可能并不总是符合您的需求，但它们可以配置为这样。
maxAssetSize和maxEntrypointSize属性分别控制资产和入口点的阈值大小，它们都以字节为单位设置。后者确保从entry对象中列出的文件(通常是JavaScript或Sass文件)创建的包不会超过指定的阈值，而前者对webpack产生的其他资产(例如图像、字体等)实施同样的限制。
如果超过阈值，让我们显示一个错误
webpack的默认警告会在超出预算阈值时发出。它对于开发环境来说已经足够好了，但是对于生产环境来说还不够好。我们可以通过在性能对象中添加提示属性并将其设置为'error'来触发错误:
现在显示的是错误而不是警告
提示属性还有其他有效值，包括'warning'和false，其中false完全禁用警告，即使违反了指定的限制。我不建议在生产模式中使用false。
我们可以把某些资产从预算中剔除
webpack为它产生的每种类型的资产强制设置大小阈值。这并不总是一件好事，因为如果发出的任何资产超过了指定的限制，就会抛出错误。例如，如果我们将webpack设置为处理图像，如果只有一个图像超过了阈值，我们就会得到一个错误。
这告诉webpack在计算性能提示时要排除任何以.jpg扩展名结尾的文件。它能够提供更复杂的逻辑，以满足环境、文件类型和其他资源的各种条件。
构建现在是成功的，但是您可能需要寻找一种不同的方法来控制映像大小。
限制
虽然这对我来说是一个很好的工作解决方案，但我遇到的一个限制是，相同的预算阈值适用于所有资产和入口点。换句话说，还不可能根据需要设置多个预算，比如对JavaScript、CSS和图像文件的不同限制。
也就是说，有一个开放的pull请求可以移除这个限制，但是它还没有合并。这绝对是值得关注的。
结论
在任何项目开始时，设置一个性能预算和执行一个webpack是值得考虑的事情。它将引起人们对您依赖的大小的关注，并鼓励您在可能的情况下寻找更轻的替代品，以避免超出预算。
也就是说，绩效预算不会就此结束!资产规模只是影响性能的众多因素中的一个，因此要确保提供最佳体验，还有很多工作要做。运行Lighthouse测试是了解您可以使用的其他指标以及改进建议的重要第一步。
感谢您的阅读，祝您编程愉快!
