如何实现英文单词不被两行分割_项目不知道如何做性能优化？不妨试一下代码分割...

前言

最近我们在前端校招面试冲刺群里辅导简历的时候，经常有同学感叹不知道怎么优化项目，那不妨尝试下在项目中引入代码分割的方式提升性能。

一、Web 应用性能优化的关键

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

那么当所需加载的资源数量到达多少或资源大小小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？

下面是我给出的一个参考值，该参考值考虑到了移动端与国外等多种访问环境：

1. 页面初载时，所有未压缩的 JavaScript 脚本大小：<=200KB；

2. 页面初载时，所有未压缩的 CSS 资源大小：<=100KB；

3. HTTP 协议下，请求资源数：<=6 个；

4. HTTP/2 协议下，请求资源数：<=20 个 ；

5. 90%的代码利用率(也就是说，仅允许 10% 的未使用代码)；

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

二、如何查看代码利用率

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

代码利用率 = 你页面中实际被执行的代码 / 你页面中引入的代码 * 100%

你可能会困惑在实际开发中如何得到这个值，别担心，通过使用 Chrome 开发者工具(很遗憾，目前只有 Chrome 支持这一功能)，你就可以迅速对你的 Web 应用进行分析，得到当前页面下的代码利用率状态，步骤如下：

1. 打开 Chrome Dev Tool；