使用 webpack 代码分割和魔术注释提升应用性能

1. Web 应用性能优化的关键

关于 Web 应用性能优化，有一点是毫无疑问的：「页面加载越久，用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于：减少页面初载时，所需加载资源的「数量」和「体积」。

那么当所需加载的资源数量到达多少或资源体积小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？下面是给出的一些参考值，该参考值考虑到了移动端与国外等多种访问环境：

• 页面初载时，所有未压缩的 JavaScript 脚本大小：<=200KB；
• 页面初载时，所有未压缩的 CSS 资源大小：<=100KB；
• HTTP 协议下，请求资源数：<=6 个；
• HTTP/2 协议下，请求资源数：<=20 个 ；
• 90% 的代码利用率（也就是说，仅允许 10% 的未使用代码）；

或许你会觉得这个标准有点过于苛刻了，是有一点点，但为了创建出高性能的 Web 应用，你的实际资源加载情况应该尽可能靠近这个目标。

2. 如何查看代码利用率

也许你注意到了，我们刚刚最后提到的一个指标是「代码利用率」，你可能是第一次听说这个概念，这里我解释一下它的计算方式：

代码利