之前我有写过一篇优化 vue 项目包大小，提升首屏加载速度的文章，文章中写了一些有关 vue 项目包大小优化的方案，这篇文章则是优化效果的对比实验结果。总的来说，在资源数量提升的情况下，页面加载速度反而有了 10~17% 的提升，这种结果既意外又欣喜，有一种“不明觉厉”的感觉…
新用户初次进入页面的场景
在 chrome 里模拟新用户初次进入页面的场景：
控制变量：Chrome 无痕模式、禁用页面缓存、模拟弱网络环境（Fast 3G 模式）
优化之前
| 指标 | 数值 |
|---|---|
| 资源数量 | 28 个请求 |
| gzip 资源 | 294Kb |
| 资源总大小 | 524kb |
| Dom加载完成时间 | 3.35s |
| 页面加载时间 | 4.06s |
优化之后
| 指标 | 数值 |
|---|---|
| 资源数量 | 35 个请求 |
| gzip 资源 | 257Kb |
| 资源总大小 | 432kb |
| Dom加载完成时间 | 2.78s |
| 页面加载时间 | 3.55s |
实验结论
由于分包原因，资源请求数量从 28 个提升到了 35 个，gizp 传输大小从 294kb 降到了 257kb，资源总大小从 524kb变成了 432kb，Dom 加载完成时间也就是页面加载完之后出现 loading 的时间从 3.35s 降到了 2.78s，提升 17%，页面完全载入时间从 4.06s 降到了 3.55s，提升 12.56%。
用户二次进入页面的场景
在 chrome 里模拟用户二次进入页面的场景：
控制变量：Chrome 无痕模式、启用页面缓存、模拟弱网络环境（Fast 3G 模式）
优化之前
| 指标 | 数值 |
|---|---|
| 资源数量 | 28 个请求 |
| gzip 资源 | 991b |
| 资源总大小 | 524kb |
| Dom加载完成时间 | 1.81s |
| 页面加载时间 | 2.07s |
优化之后
| 指标 | 数值 |
|---|---|
| 资源数量 | 41 个请求 |
| gzip 资源 | 205Kb |
| 资源总大小 | 432kb |
| Dom加载完成时间 | 1.62s |
| 页面加载时间 | 1.88s |
实验结论
用户二次加载时，资源从缓存中加载，资源总数量从 28 个变为了 41 个，gizp 传输大小可以忽略不计，资源总大小从 524kb 变成了 432kb，与初次进入页面的资源大小完全一致，Dom 加载完成时间也就是页面加载完之后出现 loading 的时间从 1.81s 降到了 1.62s，提升 10.5%，页面完全载入时间从 2.07s 降到了 1.88s，提升 10%。
此为原创文章，转载请注明出处