微信小程序性能优化

影响启动耗时的因素

• 平台: 不同平台下（安卓、iOS、PC 等）设备性能、操作系统、框架实现、优化方案存在较大差异，启动耗时也存在较大的差异。只有分平台比较启动耗时（包括各阶段的耗时）才有意义。
• 下载比例: 代码包下载和更新都会显著影响小程序启动耗时，在其他流程耗时稳定的情况下，下载比例升高会影响大盘启动耗时。
• 入口页面：不同页面启动时，根据所在分包的不同，需要下载的代码包数量和大小和代码注入量都存在差异。不同页面渲染耗时也存在差异。
• 机型分布：启动耗时和设备性能有较强关联，不同小程序或使用场景用户群体的差异可能导致机型分布的差异，进而影响大盘启动耗时。
• 网络环境：网络环境主要影响网络请求的耗时，如小程序信息获取、代码包下载等。

优化方案

• 代码包体积优化

  • 控制主包大小，最好小于1.5M，分包大小要在2M以内
  • 图片尽量使用cdn图片，减少本地图片体积，最大不要超过200k
  • 合理使用分包，独立分包的使用是要某些具有一定功能独立性的页面，不需要依赖主包或者其他分包，可以独立运行

  {
  	"root": "moduleB",
        "pages": [
          "pages/pear",
          "pages/pineapple"
        ],
    	"independent": true     // 独立分包需要的配置
  }
  

  注意：分包可以引用主包里自定义组件，主包无法引用主包里面的自定义组件。

• 代码注入优化

  • 使用时按需注入，在app.json进行引用

  {
    "lazyCodeLoading": "requiredComponents"
  }
  

  • 及时清理无用代码和资源，比如需要及时清理页面中不需要的定时器、项目中没有使用到的代码
  • 减少setData的调用，优化setData的数据大小
  • 减少代码复杂程度

• 首屏渲染优化

  • 精简首屏数据，为了让用户提前看到页面，可以刚开始设置页面状态，如loading页面，主要内容可以等数据返回后再进行展示
  • 生成骨架屏，小程序可以手动在开发工具中生成骨架屏，操作方式如下：
    骨架屏生成流程

• 数据预拉取

  冷启动：用户首次打开或者小程序销毁后被用户再次打开，小程序需要重新启动加载（onLaunch）
  热启动：用户已经打开过小程序，在一定时间内再次打开，此时小程序并被销毁，只是从后台转态进入到前台状态（onShow）
  数据预拉取需要在mp管理后台中进行配置，配置流程如下：
  数据预拉取
  数据预拉取主要适用在页面接口过多，一次性需要请求十个及以上，低于的话可以没必要使用。

以上内容尚不完全，主要是我项目中使用到的一些优化点，主要优化内容请参照：微信小程序性能与体验