微信小程序分包流程

小程序目录结构

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