微信小程序优化探索
2021-10-14 本文已影响0人
nucky_lee
一、启动性能优化:
1、启用分包加载,降低代码包下载耗时;
分包预加载,跳转到分包页面时需要下载分包才能进入页面,造成页面切换的延迟。分包预加载可以在跳转前预加载分包,解决页面切换延迟;
2、代码重构和优化:
通过代码重构删除冗余代码(组件复用,提取公共函数);利用webpack的tree shaking特性;可以通过微信开发者工具的代码依赖分析,优化代码包的大小
3、控制代码包内图片等资源
4、按需注入(app.js中全局配置)
{
"lazyCodeLoading": "requiredComponents"
}
通常情况下,在小程序启动时,启动页面所在分包和主包(独立分包除外)的所有代码,造成很多没有使用的代码注入到小程序运行环境中,影响注入耗时和内存占用。
按需注入配置后,小程序仅注入当前页面需要的自定义组件和页面代码,以降低小程序的启动时间和运行时内存。
二、页面渲染优化
1、首屏数据提前请求:小程序提供了【数据预拉取】功能,能够在冷启动时通过微信后台向服务器拉取业务数据,减少了首屏渲染等待时间;
2、骨架屏 请求页面数据时展示骨架屏页面,提升用户体验
三、运行时性能优化
1、setData用于小程序双线程环境通信,是一个耗费性能的操作;因此要避免频繁setData和一次性setData大量数据;
this.setData({
[`proTabsDatas.${eleIndex}`]: floor, // 直接修改数组单个元素
'fourth.coverShow': false //修改对象单个属性
})
参考:https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html