本文介绍了Web应用性能优化的关键，包括减少资源数量和体积。重点讲解了代码分割（code splitting）的概念、原理和类型，以及如何通过Chrome开发者工具查看代码利用率。此外，还详细阐述了Webpack中的魔术注释，如Webpack Modes和Prefetch/Preload，这些技术可以帮助提升应用性能，实现按需加载和预加载资源。
1. Web 应用性能优化的关键
关于 Web 应用性能优化，有一点是毫无疑问的：「页面加载越久，用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于：减少页面初载时，所需加载资源的「数量」和「体积」。
那么当所需加载的资源数量到达多少或资源体积小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？下面是给出的一些参考值，该参考值考虑到了移动端与国外等多种访问环境：
- 页面初载时，所有未压缩的 JavaScript 脚本大小：<=200KB；
- 页面初载时，所有未压缩的 CSS 资源大小：<=100KB；
- HTTP 协议下，请求资源数：<=6 个；
- HTTP/2 协议下，请求资源数：<=20 个 ；
- 90% 的代码利用率（也就是说，仅允许 10% 的未使用代码）；
或许你会觉得这个标准有点过于苛刻了&
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
