作者：HerryLo

原文永久链接： https://github.com/AttemptWeb/Record...

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

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

• 代码层面
  • 拆分组件
  • 图片压缩
  • 减少不必要数据
  • 避免频繁setData
  • 使用webView组件开发
• 项目层面
  • 拆分小程序
  • 分包预加载
  • 尽量升级版本库

#代码层面

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

#👇· 拆分组件

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

#👇· 图片压缩

在微信小程序项目中，不会在本地存放图片，基本都是网络图片，而网络图片的下载，需要消耗一定的时间和内存。较小图片的大小，可以提升小程序的渲染时间，减少内存的占用。通过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