背景
随着公司业务的不断壮大,最近老是有用户反应公司APP内的商城打开比较慢,这可不行啊,慢了容易流失用户,流失用户减少公司业绩,公司业绩少我的年终奖就少…………,所以为了公司,也为了自己,开始优化之路。
商城系统是去年开发的,是一个基于vue2.0的spa项目,最好的优化思路当然是与原生移动端同学合作将它hybird化,但是这样时间周期太长,改造也太大,而且年后原生移动端的同学也有离职的,导致人手不足,所以只能自己改造。
相关系列文章:
移动spa商城优化记(二)--- webpack打包速度优化篇
开始
这一篇是首屏优化篇,只讲首屏优化部分,先来看一下首屏完全加载出来长啥样,
加载步骤图
首先从原生app点击底栏的商城进入H5页面,此时瞬间大概长这样,
然后经过1-2s左右的时间(无缓存情况)会看到到下面这个loading动画,
然后loading2-3s左右完全加载出来
加载总时长在3-5s左右。
1.进入h5页之前的优化
此处白屏时间主要是移动端webview初始化以及在加载H5的静态资源,此处优化点有四个:
1.全局WebView
方法:
在客户端刚启动时,就初始化一个全局的WebView待用,并隐藏;
当用户访问了WebView时,直接使用这个WebView加载对应网页,并展示。
这种方法可以比较有效的减少WebView在App中的首次打开时间。当用户访问页面时,不需要初始化WebView的时间。
此处需要移动端同学配合。
2.前端代码打包优化
首先,要看看首屏都加载了哪些东西,最主要就是这几个,其中app和vendor都有上百k
然后开始分析文件为什么这么大,执行
npm run build --report复制代码
然后会看到一张类似这样的图(是不是很装逼~)
(图是网上找的,并没有用项目的分析图,怕被总监说泄漏源码~)
然后,一看vendor.js里面有部分lodash和moment以及第三方的一些插件的包,这都是当时赶进度偷懒留的坑啊,于是能手写的全部自己手写,去掉第三方一些包的体积。然后再把一些首页用不到的包进行懒加载,不再放到全局引用。
其他优化体积的方法如:
tree-shaking:去除没用过的代码
UglifyJsPlugin:压缩代码
ExtractTextPlugin:提取css出来
这些在之前就用过了,不在这次优化任务里面,不再细说,可以自行查阅插件用法。
3.pwa
此处推荐一个webpack插件offline-plugin,具体用法看这篇文章:
使用offline-plugin搭配webpack轻松实现PWA
这次用pwa主要是用了它的离线缓存,和http cache缓存一样,但是相对来说缓存更可控。
4.loading动画前移
现在只有H5的静态资源加载完毕后才会看到loading动画,H5静态资源优化的再小中间也是有白屏时间的,所以我们在移动端加上了loading动画,而把H5的loading动画去掉换用了骨架屏,具体在下面说。
2.进入h5页之后的优化
此处h5静态资源加载完后会看到loading动画,loading动画时在做什么呢?请求A接口,A接口返回后请求B接口,B接口返回后请求………此处优化点有四个:
1.骨架屏
一进页面先加载骨架屏占位,然后再去数据填充。
我们骨架屏是自己写的,也可以用插件
vue-skeleton-webpack-plugin
用法可以看这里:
2.部分前端请求改为服务端内网请求
比如用户信息这类接口本来是前端请求完后拿到用户信息,再拿着用户信息去请求与用户相关的页面数据,但是有些网络不稳定的地方接口串行很容易慢,如果一个超时了还得再请求一遍,所以这类移到服务端去做,直接变成内网调用接口,不受客户端网络环境影响。
3.拆分接口,页面分批渲染,部分接口数据做localstorage缓存
之前首页的数据接口为了赶时间,所有数据都是一个接口返回的,所以后端要查好多表,这次我们把一个接口拆分为多个接口,分批加载填充,另外商品分类等这种不太经常变化的数据前端缓存到localstorage中,一进页面先去localstorage中拿数据渲染,然后再动态更新。
先拿到不用区别用户的通用首页数据,并把可以缓存的缓存起来,下次直接用不走接口。
然后与用户有关的数据也回来了,再分批渲染上
最终优化后的结果是:
无白屏时间,原生loading动画1s后看到H5骨架屏,2s之内看到所有数据加载完成。
整体速度从原来的3-5s优化到1-2s之间,有缓存情况可以做到秒开,当然还有其他可以优化的地方,以后优化完了再补充。
首屏优化为什么没用vue-ssr
有同学评论问首屏优化为啥不用vue-ssr,其实是该用的,但是公司因为有更重要的项目排进来了,金三银四公司人手不太够,所以先在旧的基础上进行了优化,等抽出时间会进行服务端渲染的优化,到时候改完会再次分享一篇关于spa迁移ssr的优化文章~
最后
其实性能优化没有公式,还是要根据具体项目具体分析,每个项目的可优化点及优化方式都不一样,不能只会死板硬套雅虎军规这种公式类优化准则。
这是移动spa商城优化的第一篇,以后还会说下有关此项目的webpack打包速度优化,代码封装优化,动画优化等方面的个人经验,如果喜欢就点个赞吧~。
(文章原创整理,转载请注明出处,谢~)