mpvue性能优化实用技巧(总结)

最近一直在折腾mpvue写的微信小程序的性能优化，分享实战过程。

让我们从优化前后的图开始：

可以看到打包的代码量从813KB降到了387 KB，Audits体验评分从B降到了A，效果相当明显。其实这个指标说明不了什么，也很容易做到。更重要的是优化小程序运行过程中的卡顿感。请耐心往下看。

一般优化

常规的Web端优化方法也适用于小程序，不可忽视。

首先，压缩图片

这是最简单的一步，但很容易被忽略。在tiny上在线压缩，然后下载替换。

我的项目压缩率高达72%。可以说打包的代码从813KB减少到387KB，主要是图片压缩的原因。

第二，删除无用的库

我之前在项目中使用了Vantwapp，在静态目录下介绍了整个库，但实际上我只使用了按钮、字段、对话框等几个组件。这真的没有必要。

因此，它被简单地移除了。微信小程序提供的button、wx.showModal等部分组件基本可以满足需求，手写样式也不需要太多时间。

建议大家避免在微信小程序中使用过多的依赖库。

不要贪图方便，引进一些大型图书馆。小程序不同于Web，有很多限制。如果你能自己写，试着自己写。

小程序的优化

首先要看官方的优化建议，大部分都是围绕这个建议做的。

1.open Vue.config._mpTrace=true

这是mpvue性能优化的黑科技。可能大部分学生都不知道这个。我在官方文件中没有找到这个配置，所以我真的很信服。我可以发现这个配置也是谷歌偶然看到的。来源：mpvue重要更新，页面更新机制全面升级。具体的方法是在/src/main.js中添加Vue.config._mpTrace=true，比如：

Vue.config._mpTrace=true vue . config . production tip=false app . mptype=' app '添加了vue . config . _ mpTrace属性，因此您可以看到控制台将打印每500毫秒更新一次的数据。如图所示：

如果数据更新量大，会明显感觉小程序被卡住了，否则会很流畅。因此，根据这个指标，我们可以逐步找出性能瓶颈并加以解决。

第二，精简数据

1.过滤api返回的冗余数据

后端api可能需要为iOS、安卓、H5等提供服务。通常不需要一些冗余的数据小程序。例如，api返回的文章列表数据有许多字段：

this . article list=[{ article id : 1，desc: '