mpvue性能优化实战技巧性能优化实战技巧(小结小结)
主要介绍了mpvue性能优化实战技巧(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一
定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
最近一直在折腾mpvue写的微信小程序的性能优化,分享下实战的过程。
先上个优化前后的图:
可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A,效果还是比较明显的。其实这个指标说明不了什么,
而且轻易就可以做到,更重要的是优化小程序运行过程中的卡顿感,请耐心往下看。
常规优化常规优化
常规的Web端优化方法在小程序中也是适用的,而且不可忽视。
一、压缩图片一、压缩图片
这一步最简单,但是容易被忽视。在tiny上在线压缩,然后下载替换即可。
我这项目的压缩率高达72%,可以说打包后的代码从813KB降到387KB大部分都是归功于压缩图片了。
二、移除无用的库二、移除无用的库
我之前在项目中使用了Vant Weapp,在static目录下引入了整个库,但实际上我只使用了button,field,dialog等几个组件,实在是没
必要。
所以干脆移除掉了,微信小程序自身提供的button,wx.showModal等一些组件基本可以满足需求,自己手写一下样式也不用花什
么时间。
在这里建议大家,在微信小程序中,尽量避免使用过多的依赖库尽量避免使用过多的依赖库。
不要贪图方便而引入一些比较大的库,小程序不同于Web,限制比较多,能自己写一下就尽量自己写一下吧。
小程序的优化小程序的优化
咱们首先得看一下官方优化建议,大多是围绕这个建议去做。
一、开启一、开启Vue.config._mpTrace = true
这个是mpvue性能优化的一个黑科技啊,可能大多数同学都不知道这个,我在官方文档都没有搜到到这个配置,我
真的是服了。
我能找到这个配置也是Google机缘巧合下看到的,出处:mpvue重要更新,页面更新机制进行全面升级
具体做法是在/src/main.js添加Vue.config._mpTrace = true,如:
Vue.config._mpTrace = true
Vue.config.productionTip = false
App.mpType = 'app'
添加了Vue.config._mpTrace属性,这样就可以看到console里会打印每500ms更新的数据量。如图:
如果数据更新量很大,会明显感觉小程序运行卡顿,反之就流畅。因此我们可以根据这个指标,逐步找出性能瓶颈并解决掉。
二、精简二、精简data
1. 过滤过滤api返回的冗余数据返回的冗余数据
后端的api可能是需要同时为iOS,Android,H5等提供服务的,往往会有些冗余的数据小程序是用不到的。比如api返回的一
个文章列表数据有很多字段:
this.articleList = [
{
articleId: 1,
desc: 'xxxxxx',
author: 'fengxianqi',
time: 'xxx',
comments: [
{
userId: 2,