微信小程序性能优化全攻略（实战可直接用）

一、包体积优化（最影响首次打开速度）

1. 代码分包加载
   • 主包只放首页、tabBar 页面
   • 其他页面分到子包，主包体积控制在2M 以内
2. 图片极致压缩
   • 本地图片用tinyPNG压缩
   • 大图、封面图全部放到云端（OSS/CDN），不要放在本地包
3. 清理无用代码 / 资源
   • 删除未使用的页面、组件、图片、样式
   • 不打包多余的插件、第三方库

二、渲染与页面流畅度优化

1. 减少 setData 频繁调用
   • 不要在循环、定时器里高频 setData
   • 合并多次数据更新，一次 setData 搞定
2. 长列表优化
   • 使用wx:key提升列表渲染效率
   • 大量数据用分页加载 / 虚拟列表
3. 避免复杂 WXML 逻辑
   • 不要在{{}}写复杂表达式、函数调用
   • 复杂逻辑在 JS 里处理好再渲染

三、网络请求优化

1. 接口合并
   • 一个页面尽量只发 1～2 个请求，不要零散请求
2. 缓存数据
   • 不常变的数据用storage缓存
   • 图片用wx.downloadFile缓存
3. 懒加载非关键内容
   • 首屏只加载核心内容
   • 广告、推荐、统计等非关键资源延迟加载

四、图片与资源优化

1. 使用 webp 格式（体积小 30%～50%）
2. 图片懒加载

   xml

   <image lazy-load src="{{url}}"></image>

3. 避免大图、高清图
   • 小程序展示图宽度控制在750px 内足够清晰

五、启动速度优化（用户第一感受）

1. app.js 里不要做耗时操作
   • 不做同步存储、复杂计算、同步请求
2. 首页精简
   • 首页不要引入太多组件
   • 非必要逻辑放到onShow或延迟执行
3. 预加载下一页面数据
   • 利用空闲时间提前请求下一页内容

六、内存与卡顿优化

1. 及时清理定时器

   js

   onUnload() { clearInterval(this.timer) }

2. 避免页面泄露、全局变量滥用
3. 减少页面层级
   • 不要连续跳转 5 层以上页面
   • 不用的页面及时redirectTo关闭

七、官方工具体检（必做）

打开开发者工具 →“详情” → “项目体检”一键扫描：

• 包体积过大
• 图片未压缩
• 渲染耗时
• 无用代码
• 网络请求过多

按照报告逐条修复，性能立刻提升。

总结（最核心 4 条）

1. 分包 + 压缩图片 = 包体积变小
2. 减少 setData + 懒加载 = 页面更流畅
3. 合并接口 + 缓存 = 加载更快
4. 用官方体检工具 = 一键发现问题