最近一直在折腾mpvue写的微信小程序的性能优化，分享下实战的过程。
先上个优化前后的图：
可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A，效果还是比较明显的。其实这个指标说明不了什么，而且轻易就可以做到，更重要的是优化小程序运行过程中的卡顿感，请耐心往下看。
常规优化
常规的Web端优化方法在小程序中也是适用的，而且不可忽视。
一、压缩图片
这一步最简单，但是容易被忽视。在tiny上在线压缩，然后下载替换即可。
我这项目的压缩率高达72%，可以说打包后的代码从813KB降到387KB大部分都是归功于压缩图片了。
二、移除无用的库
我之前在项目中使用了，在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, conent: 'xxx' } ] }, { articleId: 2 // ... }, // ... ]
假设我们在小程序中只需要用到列表中的部分字段，如果不对数据做处理，将整个articleList都setData进去，是不明智的。
小程序官方文档：单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。可以看出，内存是很宝贵的，当articleList数据量非常大超过1M时，某些机型就会爆掉（我在iOS中遇到过很多次）。
因此，需要将接口返回的数据剔除掉不需要的，再setData，回到我们上面的articleList例子，假设我们只需要用articleId和author这两个字段，可以这样：
import { getArticleList } from '@/api/article' export default { data () { return { articleList: [] } } methods: { getList () { getArticleList().then(res => { let rawList = res.list this.articleList = this.simplifyArticleList(rawList) }) }, simplifyArticleList (list) { return list.map(item => { return { articleId: item.articleId, author: item.author // 需要哪些字段就加上哪些字段 } }) } } }
这里我们将返回的数据通过simplifyArticleList 来精简数据，此时过滤后的articleList中的数据类似：
[ {articleId: 1, author: 'fengxianqi'}, {articleId: 2, author: 'others'} // ... ]
当然，如果你的需求中是所有数据都要用到（或者大部分数据），就没必要做一层精简了，收益不大。毕竟精简数据的函数中具体的字段，是会增加维护成本的。
PS： 在我个人的实际操作中，做数据过滤虽然增加了维护的成本，但一般收益都很大，因次这个方法比较推荐。2. data()中只放需要的数据
import xx from 'xx.js' export default { data () { return { xx, otherXX: '2' } } }
有些同学可能会习惯将import的东西都先放进data中，再在methods中使用，在小程序中可能是个不好的习惯。
因为通过Vue.config._mpTrace = true在更新某个数据时，我对比放进data和不放进data中的两种情况会有差别。
所以我猜测可能是data是会一起更新的，比如只是想更新otherXX时，会同时将xx也一起合起来setData了。
3. 静态图片放进static
这个问题和上面的问题其实是一样的，有时候我们会通过import的方式引入，比如这样：