这篇文章分享了从遇到前端业务性能问题,到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程。
初始加载资源过多
问题起源于我们的一个页面,下面是这个页面的截图和初次请求的瀑布图。
初始加载的时候,一共请求了155个资源,请求的瀑布图就快要和页面一样长了?
初始加载的资源过多导致在 domInteractive 之后,页面花费了大量时间加载子资源,导致页面的 load 时长被严重拖长,达到了 5.6s 。
来看看这些子资源都是什么,根据请求资源的类型,我们找到了最多的类型是图片,这是显而易见的,页面上到处都是大图片,其次是 js 文件,由第三方的业务插件和一些 JSONP 的接口组成。
问题分析
再回到最初的这个页面,结合上面的数据情况我们得出了这个页面的问题总结结论:页面由大量模块组成
每个模块部分由首页自主维护,部分由业务方通过插件维护
所有模块是同时进行加载
模块中图片内容较多
每个模块的依赖资源较多(包括js文件、接口文件、css文件等)
解决思路
我们提出了下面两个主要的解决思路:
组件化分治思想
为