这篇文章上次修改于 834 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

项目:基于vue cli3 create的全家桶套餐项目,首页主要是图片素材的列表展示。

背景:关于这个项目我个人是后半段才参与进来的,之前没有过多注意,在原有的基础上继续开发。有一天leader和我说首页加载的速度有点慢,chunk-vendors.js文件过大,于是列了一个首页加载优化的task(这边暴露了一个问题,个人的敏感度不够,之前一直内网访问首页,直觉上挺快的,外网访问的时候太想当然了,以为是当前的网络问题,就没有多去想想)。基于这两天在落地这个任务,所以记录一下优化的过程,希望能给同样踩坑的知乎友人提供一个参考。如果大家有更好的方案或者想法,也望不啬赐教。

分析问题
把时间用在思考上是最能节省时间的事情
通过分析,发现主要存在几个问题

chunk-vendors.js文件过大,差不多500K。
加载图片太多,全部图片并发请求渲染。
dom 节点一次渲染1000条左右。
请求量过多。
磨刀霍霍向猪羊,发现了这些问题后,就需要开始着手逐个解决。

==========================================================
更多内容,请点击:首屏加载速度优化