微信小程序分包流程步骤

一、为什么要使用分包？

主要原因就是微信小程序规定了主包大小不能超过 2M ，但我们随着开发的更新迭代，一个小程序往往是大于 2M 的。于是小程序提供了分包的解决方法，将一个完整的的小程序，在打包时分成不同功能或需求的分包，在用户使用时再加载对应的分包。

主包：使用分包后必须有一个主包，用于存放 TabBar 页面，以及一些公共的资源文件和JS脚本。

分包：从主包上拆分而来的文件，个人建议的的拆分方式：先根据 TabBar 页面拆分大的模块，再拆分每个 TabBar内具体的小功能模块，这样拆分管理起来也更加清晰明了。

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

二、使用分包

1、基本配置

我们先看看官方给出的目录结构和 app.josn 的配置：

目录结构

app.json 配置

{
  // 省略其他的...
  
  "subPackages": [
      {
        "root": "subpkg_user", // 分包代码的目录，其实就是一个独立的文件夹
        "pages": [
          "pages/profile/profile"
        ]
      },
      {
        "root": "subpkg_order", // 文件夹
        "pages": [
          "pages/order_list/index", 
          "pages/order_list/index"
        ]
      }
  ]
}

app.json 参数说明：

• pages：主包 List ，默认以一个路径为主页，放置 TabBar 的页面，放在根目录下的 pages 文件夹内。
• subpackages：分包 List ，官方的分包是默认放在根目录下的，实际上可以根据自身需要配置路径，下文将根据官方的 demo 展示。

在打开小程序启动的时候只下载主包代码，分包并不会下载，因此能够提升小程序启动时的打开速度，但是分包的代码只有在访问到分包的页面时才去下载，这样用户就需要有一定时间的等待（一般不太影响），通过分包预加载技术可以实现提前去下载分包的代码，这样分包页面的访问速度也会得到提升。
小程序通过 preloadRule 配置需要预加载的分包。

预分包加载配置：app.json

• 指定某个页面路径做为 key，含义是当访问这个页面时会去预加载一个分包
• network 预加载分包的网络条件，可选值为 all、wifi，默认为 wifi
• packages 指定要预下载的分包名或根路径

示例：

 "preloadRule": {
    "pages/index/index":{
      "network": "all",
      "packages": ["subpkg_user"]
    }
  }

上述的代码代表的含义是当用户访问到 pages/index/index 时，在 wifi 网络前提下预先下载 goods_pkg 分包的代码。

分包只能提高主包的下载速度，也就是小程序的启动速度。分包预下载可以提高分包的加载速度。