实战剖析-vue项目首屏加载时长优化

首屏速度是用户体验的最关键一环，而首屏速度最大的决定性因素就是资源的加载速度，资源加载速度等于资源大小 + 网速，老的前端项目随着不断增长，代码可能会变得混乱，冗余难以理解，不断的做加法，久而久之，前端性能上就会受到影响，相信大家在工作当中一定遇到，页面加载时间慢，响应时间长等问题，本文将以具体项目为例（vue 2.51.7 webpack:4.23.1），一点一点分析，通过实战的角度，介绍如何对Vue项目的首屏加载时间进行优化。

首先我们分析一下页面加载时间的构成：

（1）资源加载；

（2）代码执行；

（3）页面绘制；

打开chrome开发者模式面板，为了更好的还原用户的使用场景，我在设置-节流配置中添加模拟5G的性能分析选项，对网络状况做最大限度还原，开始录制页面加载过程，

通过性能分析工具，我们就能看到一共有哪些执行，花了多长时间，通过查看网络面板，可以查看到每一个资源的加载时间，脚本执行，页面渲染和绘制时间，可以看出等待加载资源过大，执行脚本时长是占据白屏时间的首要因素。也可利用window.performance，以数据化的形式查看页面的各种时间，甚至可以把这些时间指标通过接口的形式发送给服务端，可以监控我们的项目在用户的终端设备中的表现；

window.onload = function(){
    axios({
        url: "xxx",
        data: window.perfoformace
    })
}

问题找到了，就解决它

针对资源加载太慢的问题我先寻找大佬赏赐了一些思路：

1、找到是哪个文件过大导致，是否可以拆包；2、如果不是马上需要的资源，可以异步加载；3、利用tree-shaking，尽量使用按需引入；4、定期实效数据可以缓存在cookies/localstorage中；5、进行gzip压缩；6、利用webpack / vite对代码进行压缩；

作为一只资深笨鸟，对大佬的思路领悟只有一二成，用最笨的方法，一条一条排查