小程序分包
作者：互联网
转自: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.一些公共用到的自定义组件，需要放在主包内。
标签：index,app,程序,分包,主包,pages,页面 来源： https://blog.csdn.net/weixin_44510465/article/details/89208139