小程序目录结构
- app.js
- app.json
- app.wxss
- pages // 主包所有页面- index // 页面内容,包含(index.js,index.wxml,index.json,index.wxss)- logs
- packageA // 第一个分包- pages // 第一个分包的所有页面- index // 页面内容,包含(index.js,index.wxml,index.json,index.wxss)- logs
- packageB // 第二个分包- pages // 第二个分包的所有页面- apple // 页面内容,包含(apple.js,apple.wxml,apple.json,apple.wxss)- banana
- utils
配置方法
普通分包
找到app.json内容配置如下:
{"pages":[ // 主包所有页面"pages/index/index","pages/logs/logs"],"subPackages": [ // 通过subPackages节点,声明分包的结构{"root":"packageA", // 第一个分包根目录"name": "pack1", // 分包的别名"pages": [ // 当前分包下,所有页面的相对存放路径"pages/cat/cat","pages/dog/dog"]},{"root":"packageB", // 第二个分包根目录"name": "pack2", // 分包的别名"pages": [ // 当前分包下,所有页面的相对存放路径"pages/apple/apple","pages/banana/banana"]}]
}
保存app.json就会自动创建分包了,直接在相应页面写代码就好
例如我想去到packageB/pages/banana/banana这个页面,则直接跳转packageB/pages/banana/banana这个地址即可
独立分包
当小程序从普通的分包页面启动时，需要首先下载主包
独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
找到app.json内容配置如下:
{"pages":[ // 主包所有页面"pages/index/index","pages/logs/logs"],"subPackages": [ // 通过subPackages节点,声明分包的结构{"root":"packageA", // 第一个分包根目录"name": "pack1", // 分包的别名"pages": [ // 当前分包下,所有页面的相对存放路径"pages/cat/cat","pages/dog/dog"],"independent": true // 加上这个属性为true就是独立分包},{"root":"packageB", // 第二个分包根目录"name": "pack2", // 分包的别名"pages": [ // 当前分包下,所有页面的相对存放路径"pages/apple/apple","pages/banana/banana"],"independent": true // 加上这个属性为true就是独立分包}]
}
引用规则
独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源，例如:
- 主包无法引用独立分包内的私有资源
- 独立分包之间，不能相互引用私有资源
- 独立分包和普通分包之间，不能相互引用私有资源
特别注意:独立分包中不能引用主包内的公共资源
分包预下载
分包预下载指的是:在进入小程序的某个页面时，
由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
配置分包的预下载
预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载规则，示例代码如下:
{"pages":[ // 主包所有页面"pages/index/index","pages/logs/logs"],"preloadRule": { // 分包预下载规则"pages/index/index":{ // 触发分包预下载的页面路径"network": "all", // 可选值为all(不限网络)和wifi(仅wifi模式下进行预下载),默认值为wifi"packages": ["pack1","packageB"] // 表示进入页面后预下载哪些分包,可以通过分包的root值或者name值指定预下载哪些分包}},"subPackages": [ // 通过subPackages节点,声明分包的结构{"root":"packageA", // 第一个分包根目录"name": "pack1", // 分包的别名"pages": [ // 当前分包下,所有页面的相对存放路径"pages/cat/cat","pages/dog/dog"]},{"root":"packageB", // 第二个分包根目录"name": "pack2", // 分包的别名"pages": [ // 当前分包下,所有页面的相对存放路径"pages/apple/apple","pages/banana/banana"]}]
}
同一个分包中的页面享有共同的预下载大小限额 2M
