小程序开发指南之性能优化

将从代码层面和项目层面，聊一聊微信小程序的性能优化问题，希望有所帮助。也是自己最近的一个总结。(前置知识：微信小程序的视图层是WebView支持，逻辑层是JSCore支持，逻辑层通过setData与视图层发生交互。每一个页面都是一个WebView页面）详见：小程序的运行环境

下面的内容不论是使用Taro框架开发，还是微信小程序原生开发，都是适用的。

代码层面
项目层面

代码层面

通过代码细节提升性能，而且在这方面，空间是非常大的。对于比较早期的小程序项目，由于代码细节方面没有过多的考虑，也导致了开发出的小程序非常的消耗性能。下面将提到的一些点，不论是正在开发的项目，还是在维护的项目，都会有一定的帮助。

?· 拆分组件

对于小程序的项目，由于野蛮式开发，不会太多的考虑组件拆分。当然对于关注组件开发的公司，肯定会在早期就做好一定的规划。做好组件的拆分，可以保证组件的复用，大量的减少重复的代码。（组件开发的思想，目前基本适用所有的前端开发项目）。如何有效拆分组件方法，详见[[译] 你是如何拆分组件的？](https://juejin.im/post/59aa7f8c6fb9a024747f13b7)。

?· 图片压缩

在微信小程序项目中，不会在本地存放图片，基本都是网络图片，而网络图片的下载，需要消耗一定的时间和内存。较小图片的大小，可以提升小程序的渲染时间，减少内存的占用。通过CDN静态资源服务器获取图片资源，添加图片压缩规则，可以极大的提升性能。

?· 减少不必要数据

减少data中的亢余数据。不必要数据，传入setData会造成不必要的性能消耗。建议：不要直接将接口数据全部保存在data中，只有页面需要渲染的数据，才通过setData进行挂载，非必要的数据可以直接挂载在当前页面page的this上。

let data = {
    list: [item, item, item, item, item],
    title: "xxxx",
    path: 'xx/xx/xx'
}

// ❌不好的处理
this.setData({
    data: data
})

// ?好的处理 只挂载必要参数
this.setData({
    dataList: data.list
})
this.title = data.title
this.path = data.path

?· 避免频繁setData

// ❌不好的处理
this.setData({
    count: 1
})
this.setData({
    count: 2
})
this.setData({
    count: 3
})

三次setData会被全部触发嘛？是的，会被全部调用。

在微信小程序中，并不像react，把多次操作合并。每次setData的过程，就是一次JSCore逻辑层和 webView视图层的交互。过多的交互，会降低小程序的用户体验。例如滑动监听滚动，操作setData，非常的消耗性能，可以考虑使用节流函数，降低调用频率。

官方给出的说法是：setData接口的调用涉及逻辑层与渲染层间的线程通信，通信过于频繁可能导致处理队列阻塞，界面渲染不及时而导致卡顿，应避免无用的频繁调用。来修改一下上面的代码。

// ?好的处理
let data = { count: 1 }
data.count = 2;
data.count = 3;
this.setData(data)

?· webView组件开发

灵活性非常强的页面，同时需要多端使用，建议使用微信小程序提供的webView组件，套用h5页面进行页面开发，避免重复开发。当微信小程序包过大之后，也建议使用h5页面替换开发。详见webView 组件

项目层面

通过微信小程序项目配置来提升加载性能，下面的方案可以有效的解决问题，不过也要试情况而定。

?· 拆分小程序

在包过大的情况下下，可以进行小程序包的拆分，详见：分包加载。对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。如果业务庞大，也可以单独抽离一个新的小程序。

?· 分包预加载

采用分包配置之后，分包加载也是需要时间的。对于一些比较常用，或者比较重要的页面，可以采取分包预加载的手段，来完成分包的提前下载，减小分包载入的时间。详见分包预下载

?· 尽量升级版本库

注意基础版本库的问题，在合适的前提下升级版本库，尽量将版本库升级为最新版本。因为版本库升级为最新，可以有效避免很多问题。

目前随着各大公司业务的不断迭代，小程序的体积不断真大，小程序渐渐的不在小。请让小程序尽量的小起来，发挥它小的作用。希望以上内容可以帮到你。