优化 vue 项目包大小对比实验结果

之前我有写过一篇优化 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%。