vue优化首页加载时间的探索

       一个月前, 公司用户反馈后台收到用户反馈, 说我们的iosApp客户端的福利中心页首次加载时间太久.  因为这个页面是嵌入的web网页. 所以早晨开会领导指示要抽时间优化下这个东西. 第一次接到这种工作, 没有什么逻辑可寻. 一开始在网上找了几种方法, 比如模块换成cdn, 优化代码 等等. 但是基本没有效果.  于是,  最近的晚上和周六日都在研究, 把测试版代码改的稀巴烂. 算是功夫不负有心人, 找到了一种可行的方案. 分享给大家.

      本文为了说的详细, 可能文章较长. 先介绍下待优化的工程. 我的工程是一个vue移动端工程. 一共27个路由. 路由做了懒加载.工程中用到的模块有vue, vue-router, axios. 没有其他模块. 

      试过至少3种方案, 效果都不好或者一点作用没有. 直接说可行的一种方案.先看首页加载的抓包

      优化前:

优化后:

 

         这么一场折腾下来, 终于把首页打开时间减少了很多. 可以看到请求数和资源都少了1到2倍. 肉眼可见的效果. 再次打开首页的时候能明显肉眼可见的速度提升. 还是很值的.

        排查逻辑如下:

        个人认为是 虽然做了路由懒加载, 但是vue是单页应用的性质, 还是会请求和首页路由无关的js css文件. 虽然不会请求下来, 但是由于chrome并行请求的个数限制在6个左右. 所以, 会阻塞当前的路由请求. 花费了不少时间. 

       既然认为是这个原因导致, 那办法就是首页的时候不要请求和当前页无关的静态资源文件. 解决办法就是首页和主工程分开打包. 打包成两个html文件. 另一个.html文件只引入我们首页需要的.js  .css文件.  这样我们首页的渲染的时候使用我们另外打包的.html文件访问即可.

      具体多页打包配置请参考vue-cli官网. 这里不做赘述. https://cli.vuejs.org/zh/

 

     最后, 其实个人还有一个建议, 就是这样优化下来, 其实我们的另一个.html文件当然还是请求了vue vue-router axios 这三个模块. 如果你的工程首页并不是逻辑太复杂. 其实完全不用vue和vue-router. 直接原生撸, 体积又会减小几十kb, 他不香吗?

    各种细节没写的太细, 如果各位前端老爷有各种疑问, 请随时留言, 看到都会回复的.

    辛苦制作, 转载请注明出处. 谢谢!!!