微信小程序官方性能优化指南

目录

前言：

小程序启动流程介绍

一.代码包体积优化

1.分包加载

2.避免非必要的全局自定义组件和插件

3.控制代码包内的资源文件

4.及时清理无用代码和资源

5.部分页面 h5 化

二、代码注入优化

1.按需注入

2.用时注入

3.启动过程中减少同步 API 的调用

4.避免启动过程进行复杂运算

三.首屏渲染优化

1. 使用「按需注入」和「用时注入」

2.启用「初始渲染缓存」

3.避免引用未使用的自定义组件，精简首屏数据，根据页面内容优先级延迟更新非关键部分或不可见部分。

4.精简首屏数据

5.提前首屏数据请求

6.缓存请求数据

7.非关键渲染数据延迟请求

结尾：

---

前言：

在这篇博客中，我将分享一些关于如何优化微信小程序性能的官方指南。微信小程序作为一种快速发展的移动应用开发平台，具有强大的功能和广泛的用户群体。然而，随着小程序规模的不断扩大和功能的增加，开发者们也面临着越来越多的性能挑战。为了提供更流畅、更高效的用户体验，微信小程序官方团队不断更新和优化开发工具，并提供了一系列性能优化的指南和建议。

小程序启动流程介绍

在进行启动优化之前，我们先介绍一下小程序的启动过程。了解小程序的启动流程，可以帮助开发者更有针对性地选择性能优化的手段，分析性能优化的效果。

下列图片简要描述了部分情况下的小程序启动流程（注意：其中矩形块的高度不与对应阶段耗时成比例）：

小程序启动流程示意图（用户首次访问或小程序同步更新时，命中环境预加载）

小程序启动流程示意图（用户非首次访问，命中环境预加载）

小程序启动流程示意图（用户非首次访问，未命中环境预加载）

一.代码包体积优化

1.分包加载

• 独立分包：通过定义 "independent" 字段将某个分包设置为独立分包。

//在原有分包配置的基础上定义 independent 字段
"subpackages": [
        {
            "root": "subpackages",
            "pages": [
                "index/index"
            ],
            "independent": true
        }
    ]

• 分包预下载：在 app.json 中增加 preloadRule 字段来配置分包预下载规则。 

//在 app.json 中增加 preloadRule 字段
"preloadRule": {
    "pages/index": {
      "network": "all",//网络
      "packages": ["important"]//路径
    },
    "sub1/index": {
      "network": "wifi",
      "packages": ["hello", "sub3"]//name
    },
    "indep/index": {
      "packages": ["__APP__"]//主包
    }
  }

2.避免非必要的全局自定义组件和插件

• 在分包内引入插件代码包。

{
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ],
      "plugins": {
        "myPlugin": {
          "version": "1.0.0",
          "provider": "wxidxxxxxxxxxxxxxxxx"
        }
      }
    }
  ]
}

• 在分包内引入自定义组件，通过页面的 json 文件声明 usingComponents 字段。

3.控制代码包内的资源文件

• 将图片、音频、视频、字体等资源部署到 CDN，并使用 URL 引入。

4.及时清理无用代码和资源

• 定期检查并剔除意外引入的第三方库、版本迭代中废弃的代码或依赖、未使用的组件、插件等。
• 进行 JS、CSS Tree-Shaking。

5.部分页面 h5 化

• 小程序提供了 web-view 组件，支持在小程序环境内访问网页。当实在无法在小程序代码包中腾出多余空间时，可以考虑降级方案 ——> 把部分页面 h5 化 

二、代码注入优化

1.按需注入

• 在 app.json 中设置 "lazyCodeLoading" 为 "requiredComponents"，实现按需注入。

//在app.json中加入
{
  "lazyCodeLoading": "requiredComponents"
}

2.用时注入

• 在已经指定 lazyCodeLoading 为 requiredComponents 的情况下，为自定义组件配置占位组件，组件就会自动被视为用时注入组件（占位组件 | 微信开放文档）。

3.启动过程中减少同步 API 的调用

• 由于 getSystemInfo单次调用可能比较久建议对调用结果进行缓存，避免重复调用
• 对于简单的数据共享，可以使用在 App.js 上增加全局数据对象完成

// app.js
App({
  globalData: { // 全局共享的数据
    userName: 'Wechat'
  }
})

// pages/index.js
const app = getApp()
Page({
  onLoad() {
    const { userName } = app.globalData
  }
})

4.避免启动过程进行复杂运算

• 在小程序初始化代码（Page，App 定义之外的内容）和启动相关的几个生命周期中，应避免执行复杂的运算逻辑。

三.首屏渲染优化

1. 使用「按需注入」和「用时注入」

等同于代码注入优化里的1、2项

2.启用「初始渲染缓存」

• 全局或局部配置在 app.json 或页面 json 中实现。

//全局在app.json引入，局部在页面json引入
{
  "initialRenderingCache": "static"
}

3.避免引用未使用的自定义组件，精简首屏数据，根据页面内容优先级延迟更新非关键部分或不可见部分。

4.精简首屏数据

• 根据页面内容优先级，优先展示页面的关键部分，对于非关键部分或者不可见的部分可以延迟更新。
  此外，与视图层渲染无关的数据应尽量不要放在 data 中，避免影响页面渲染时间。

5.提前首屏数据请求

数据预拉取：（基础能力 /数据预拉取）

1. 在发起页面跳转前（如使用 wx.navigateTo 方法），首先发起对下一个页面所需数据的主接口请求。

2. 将该请求封装成一个 Promise 对象，并存储在全局变量中，以便在下一个页面加载完成后读取数据。

3. 下一个页面加载完成后，从全局 Promise 对象中读取数据，用于页面的渲染和展示。

周期性更新：（基础能力 /周期性更新）

1. 在小程序后台或服务器端设置一个定时任务，定期向第三方服务器发送请求，获取最新的业务数据。

2. 将获取到的数据存储在服务器端或小程序后台的数据库中，以备小程序在用户打开时使用。

3. 当用户打开小程序时，小程序首先向后台发送请求，获取最新的数据，然后进行页面的渲染和展示。

6.缓存请求数据

• 使用wx.setStorage、wx.getStorage等读写本地缓存的能力，数据存储在本地。

7.非关键渲染数据延迟请求

非关键渲染数据延迟请求是一种优化策略，旨在在初始化首页时，延迟加载不是页面主体内容的数据，以加快页面渲染速度和降低用户等待时间。具体实现方法如下：

1. 在小程序初始化时，首先加载页面的主体内容，即关键渲染数据，以确保用户能够尽快看到页面的核心内容。

2. 将非关键渲染数据的请求延迟到页面主体内容加载完成之后再发起。这些非关键渲染数据包括页面上不太重要或用户不一定立即需要的内容，如广告、推荐信息等。

3. 可以通过拆分接口或分屏渲染的方式，将页面数据划分为首屏模块和非首屏模块。首先渲染首屏模块，等用户浏览主体内容时再渲染非首屏模块，从而减少用户等待时间和提升渲染速度。

4. 可以利用分屏渲染的方式，在获取到主体模块数据后，优先渲染首屏模块，然后再渲染非首屏模块和非主体模块。这样可以降低主接口的调用时延，减少响应体的数据量，进而缩短网络传输时间，提高页面加载速度。

结尾：

通过本文对微信小程序官方性能优化的探讨，我们深入了解了如何优化小程序的代码包体积、代码注入、首屏渲染等关键方面。从分包加载、按需注入到数据预拉取、周期性更新等技术手段的介绍，我们可以看到，在微信小程序开发中，通过合理的优化策略，可以显著提升小程序的加载速度和用户体验。

参考资料：

《微信开发文档·小程序》