自学微信小程序开发第九天-关于分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时可以按照需求进行加载。分包对于开发团队来说可以更好的解耦协作，对于用户来说可以优化小程序首次启动的下载时间。

另对于微信小程序来说，是对项目大小有限制的。在开发工具的详情 => 项目配置中可以看到，不使用分包时总大小只能有 2M ，使用分包时每个分包大小为 2M ，总大小为 20M（网上有些说是16M，具体的可以查看自己的项目配置） ，所以当项目大小到一定程度后，必须进行分包。

分包前后的项目构成

分包前所有的页面和资源是打包到一起的，使用时全部下载到本地。而分包后项目由一个主包和若干个分包组成。

• 主包：一般只包含项目的启动页面或 TabBar 页面，以及所有分包都需要使用到的公共资源。
• 分包：只包含和当前分包有关的页面和私有资源。

分包的加载规则

小程序启动时，会按照一下规则进行加载：

1. 首先默认下载主包，并启动主包内的页面
   tabBar 页面需要放到主包中
2. 当用户进入到分包内的页面时，客户端会下载相应的分包，下载完再进行展示。
   非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，按需下载。

文件分配

一般分包后小程序项目的目录结构分为4部分：

1. 包含 app.js 、app.json 、app.wxss 在内的应用全局代码
2. pages 文件夹，存放主包的所有页面
3. 若干自定义的分包文件夹，用于存放分包的页面
4. 包括 utils 等存放公共资源文件的文件夹

所以主包就包括了1、2、4项所包含的文件，而第3项则是分包文件。

分包的配置定义

分包在 app.json 中进行定义。类似于主包页面在 app.json 里的 pages 节点中被定义，分包在 app.json 里同一级别的 subpackages 节点中被定义。 subpackages 定义的是个对象数组，每个对象成员就是一个分包，其包含4个字段：

字段	类型	说明
root	String	分包的根目录
name	String	分包的别名，分包预下载时使用
pages	String Array	分包页面路径，相对于分包根目录
independent	Boolean	是否独立分包

分包的一些原则

打包原则

• 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中
• 主包也可以有自己的 pages，即最外层的 pages 字段
• subpackage 的根目录不能是另外一个 subpackage 内的子目录，即不能互相嵌套
• tabBar 页面必须在主包内

引用原则

• 主包无法引用分包内的私有资源
• 分包之间不能相互引用私有资源
• 分包可以引用主包内的公共资源

分包举例

使用以下目录结构进行举例
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
则分包的配置代码为：

{
  "pages":[			// 主包页面
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [		
    {						// 分包1
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {					// 分包2
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

独立分包

独立分包是一种特殊类型的分包，可以独立于主包和其他分包单独运行。通常用户会从主包进入小程序，但是特殊情况时从独立分包中页面进入小程序，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。因此独立分包和主包以及其他分包之间是相互隔离的。

独立分包的应用场景举例

在以往程序中，普通用户和管理员用户所访问的页面是完全不同的。在小程序中，就可以将管理员页面作为独立分包，能够大幅提升分包页面的启动速度。 一个小程序中可以有多个独立分包，以应对不同场景。

声明独立分包

在分包的 subpackages 字段中，使用 "independent": true来声明此分包为独立分包。

进入独立分包页面

因为小程序的默认进入页面是 pages 配置的第一个页面，所以直接打开小程序时是需要加载主包的。进入独立分包页面而不加载主包的场景从网上搜索的结果看来，应该是通过其他方式跳转路径打开而绕过主包。猜想是类似通过其他小程序跳转等方式进行的，这个有待测试。

分包预下载

在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。
预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。preloadRule 的成员为键值对，键是页面路径，值是进入此页面时的预下载配置。值的配置有2项：

字段	类型	必填	默认值	说明
packages	String Array	是	无	进入页面后预下载分包的root或name。_APP_表示主包
network	String	否	wifi	在指定的网络下进行预下载，可选值为：all不限网络/wifi仅限wifi下

例：

{
  "pages": ["pages/index"],
  "subpackages": [
    { "root": "important", "pages": ["index"], },
    { "root": "sub1", "pages": ["index"], },
    { "name": "hello", "root": "path/to",  "pages": ["index"] },
    { "root": "sub3", "pages": ["index"] },
    { "root": "indep", "pages": ["index"], "independent": true }
  ],
  "preloadRule": {
    "pages/index": { "network": "all", "packages": ["important"] },
    "sub1/index": { "packages": ["hello", "sub3"] },
    "sub3/index": { "packages": ["path/to"] },
    "indep/index": { "packages": ["__APP__"] }
  }
}

需要注意的是，同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。