微信小程序之性能优化（分包、运行流程细节、精简结构、原生组件通信）

小程序的运行流程和一些重要细节，还介绍了进行优化的基本方法。主要的优化策略可以归纳为三点：精简代码，降低WXML结构和JS代码的复杂性；合理使用setData调用，减少setData次数和数据量；必要时使用分包优化。

1 启动

在小程序启动时，微信会为小程序展示一个固定的启动界面，界面内包含小程序的图标、名称和加载提示图标。此时，微信会在背后完成几项工作：下载小程序代码包、加载小程序代码包、初始化小程序首页。

​ 图1 小程序启动流程图

1 代码包下载

在某个小程序第一次启动时，微信需要下载小程序代码包。此后，如果小程序代码包未更新且还被保留在缓存中，则下载小程序代码包的步骤会被跳过。下载到的小程序代码包不是小程序的源代码，而是编译、压缩、打包之后的代码包。代码包大小可以在开发者工具的“详情”栏中找到。
从开发者的角度看，控制代码包大小有助于减少小程序的启动时间。对低于1MB的代码包，其下载时间可以控制在929ms（iOS）、1500ms（Android）内。

以下是一些常规的控制代码包大小的方法。

1. 精简代码，去掉不必要的WXML结构和未使用的WXSS定义。

2. 减少在代码包中直接嵌入的资源文件。

3. 压缩图片，使用适当的图片格式。

如果小程序比较复杂，优化后的代码总量可能仍然比较大，此时可以采用分包加载的方式进行优化。

2 分包加载流程

一般情况下，小程序的代码将打包在一起，在小程序启动时一次性下载完成。采用分包时，小程序的代码包可以被划分为几个：一个是“主包”，包含小程序启动时会马上打开的页面代码和相关资源；其余是“分包”，包含其余的代码和资源。这样，小程序启动时，只需要先将主包下载完成，就可以立刻启动小程序。这样就可以显著降低小程序代码包的下载时间。

图2 分包目录结构示例

代码清单1 使用分包时app.json示例

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

一个支持分包的小程序目录结构可以组织成上图的形式。代码根目录下有“pac