一,为什么要使用分包
2017.01.09 小程序上线时,官方限制小程序代码包不能超过1MB 大小。所以小程序才能“随用随走“ ,秒开。但是时至今日,官方公布的最新的代码体积控制:
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M
从1M到8M,变化的不只是小程序的代码体积,更是小对程序的打开速度产生极大的影响。1M的时候小程序可以做到秒开,如果8M还能这么灵活轻便吗????
用户打开小程序,首先会下载小程序的所有代码,然后根据配置打开首页。在8M的情况下,这个下载的过程是相当的耗时的。因此,官方为了解决这个痛点,特此推出了分包。
在小程序启动时,默认会下载主包并启动主包内页面,当用户用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
如此一来小程序加载流程变成了
- 首次启动时,先下载小程序主包,显示主包内的页面;
- 如果用户进入了某个分包的页面,再下载这个对应分包,下载完毕后,显示分包的页面。
二,怎么使用分包
官方规定支持分包的最低版本:
微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本,
1,修改目录
使用分包并不用对目前代码做什么修改,仅仅修改一下代码的目录文件和配置文件即可。
例如我们把小程序的目录结构修改成如下:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
划分分包的时候我们要遵循一下原则:
- 避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的,并不能确保某分包加载时,另外一个分包就一定存在,这个时候可能会导致 JS 逻辑异常的情况,例如报「”xxx.js” is not defined」这样的错误;
- 一些公共用到的自定义组件,需要放在主包内。
目录修改后我们要注意会发生以下变化:
- packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件
- packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template
- packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源
2,修改app.json
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
从app.json的配置中我们可以看出,pages里面只有主包的两个页面,那么加载速度必然会提升很多。
subPackages的具体参数含义:
修改app.json要注意一下几点:
- 声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目录将被打包到 app(主包) 中
- app(主包)也可以有自己的 pages(即最外层的 pages 字段)
- subPackage 的根目录不能是另外一个 subPackage 内的子目录
- tabBar 页面必须在 app(主包)内
以上就是小程序中分包的使用方法。具体可以参考小程序分包