微信小程序的分包

转自:https://www.jianshu.com/p/e51316e15a6a
1.分包
为什么使用分包
小程序第一版 推出 小程序代码包不能超过1MB 大小，所以，小程序可以秒开，但是随着业务的发展，又推出整个小程序所有分包大小不超过 8M，而8M不能秒开，于是就推出分包加载。
对于小程序而言

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

	在小程序启动时，默认会下载主包并启动主包内页面
	当用户用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

分包支持版本
微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本

对于小程序游戏而言
目前小游戏分包大小有以下限制：

	整个小游戏所有分包大小不超过 8M
	单个分包/主包大小不能超过 4M

分包支持版本

微信 6.6.7 客户端，2.1.0 及以上基础库开始支持，请更新至最新客户端版本，开发者工具请使用 1.02.1806120 及以上版本

分包步骤
小程序的分包步骤
step1：
添加项目目录

					├── app.js
					├── app.json
					├── app.wxss
					├── packageA
						│   └── pages
							│       ├── cat
							│       └── dog
					├── packageB
						│   └── pages
							│       ├── apple
							│       └── banana
					├── pages
							│   ├── index
							│   └── logs
					└── utils

step2：
在app.json中的目录结构中添加分包目录("subpackages"或"subPackages"都可以)

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

step3：
分包配置
subpackages里面的配置项包括

	root String 分包根目录
	name String 分包别名，分包预下载时可以使用
	pages StringArray 分包页面路径，相对与分包根目录
	independent Boolean 分包是否是独立分包

打包规则

	1.声明 subpackages 后，将按 subpackages 配置路径进行打包，2.subpackages 配置路径将作为分包打包，其他都被打包到 app（主包） 中
	3.app（主包）也可以有自己的 pages（即最外层的 pages 字段）
	4.subpackage 的根目录不能是另外一个 subpackage 内的子目录
	5.tabBar 页面必须在 app（主包）内
	6.每个分包都可以使用自己分包内的资源以及引用require app里面的资源，但是分包与分包之间 ，都是不可通信的，分包与主包下的pages里面的内容也是不可通信的(这一点有待考证)

分包预下载

基础库 2.3.0 开始支持，低版本需做兼容处理。 开发者工具请使用 1.02.1808300 及以上版本，可点此下载。
目前只支持通过配置方式使用，暂不支持通过调用API完成。

通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

配置方法
在app.json中增加 preloadRule 配置来控制。

						{
						  "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__"]
						    }
						  }
						}

以上配置

key 是页面路径，value 是进入此页面的预下载配置，

packages的 value是StringArray 类型，表示进入页面后预下载分包的 root 或 name。APP 表示主包。

network 是string类型 默认 为 ‘wifi’ ，标识在指定网络下预下载，
可选值为
all: 不限网络
wifi: 仅wifi下预下载

同一个分包中的页面享有共同的预下载大小限额 2M(一个分包内的所有页面加总只有2M预下载)，限额会在工具中打包时校验。

独立分包

小程序游戏不支持独立分包。

微信客户端 6.7.2，基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。

1.从独立分包中页面进入小程序时，不需要下载主包。
2.从普通的分包页面进入小程序时，首先下载主包；

优势：提升分包页面的启动速度。

配置方法
app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

							{
							  "pages": [
							    "pages/index",
							    "pages/logs"
							  ],
							  "subpackages": [
							    {
							      "root": "moduleA",
							      "pages": [
							        "pages/rabbit",
							        "pages/squirrel"
							      ]
							    }, {
							      "root": "moduleA",
							      "pages": [
							        "pages/pear",
							        "pages/pineapple"
							      ],
							      "independent": true
							    }
							  ]
							}
					普通分包的所有限制都对独立分包有效。独立分包隶属于普通分包

注意

独立分包中不能依赖主包和其他分包中的内容,如：js文件、template、wxss、自定义组件、插件等,
避免在独立分包页面中使用 app.wxss 中的样式；

App 只能在主包内定义
独立分包中暂时不支持使用插件。

1.独立分包运行时，App 并不一定被注册，
即 getApp() 可能死两种情况，a: 可以获得 App 对象,b. undefined

为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 getApp支持 allowDefault参数，在 App 未定义时返回一个默认实现。当主包加载，App 被注册时，默认实现中定义的属性会被覆盖合并到真正的 App 中。

独立分包中

			const app = getApp({allowDefault: true}) // {}
			app.data = 456
			app.global = {}
			app.js 中

			App({
			  data: 123,
			  other: 'hello'
			});
			console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

当从独立分包启动小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。

注意
1.分享路径必须去除前面的斜线，否则会出现报错 某某页面不应该出现在分包页面中
2.无法在首页或tabbar页打开分包中的页面，必须先链接到非首页或tabbar页面，再进行跳转到分包中的页面。
3.每个页面的js文件必须初始化page({})。
4.tabBar 页面必须在 app（主包）内
5.一些公共用到的自定义组件，需要放在主包内。