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

  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. 用官方体检工具 = 一键发现问题
Logo

更多推荐