一、介绍
分包加载是一种小程序的优化技术,将小程序不同功能的代码,分别打包成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,在构建小程序分包项目时,构建会输出一个或多个分包,每个使用分包小程序必定包含有一个主包。
- 主包:包含默认启动页面/TabBar页面以及所有分包都需用到公共资源的包。
- 分包:根据开发者的配置进行划分出来的子包。
- 整个小程序所有分包大小不超过20MB。
- 单个分包/主包大小不能超过2MB。
二、分包加载配置
小程序进行分包加载,需要在app.json中,通过subPackages或者subpackages定义分包结构。
分包结构三个常用字段:
1、root:分包的根目录,该目录下的所有文件都会被打包成一个独立的包。(根目录配置不能./开头,也不能以/开头)
2、name:分包的别名,用于在代码中引用该分包。
3、pages:指定当前分包中包含哪些页面。
"subPackages": [{"root": "modules/goodModel","name": "goodModel","pages": ["pages/list/list","pages/detail/detail"]}]
三、打包原则
1、tabBar页面必须在主包内。
2、最外层的pages字段,属于主包的包含的页面。
3、按subPackages配置路径进行打包,配置路径外的目录将打包到主包中。
4、分包之间不能相互嵌套,subpackage的根目录不能是另一个subpackage内的子目录。
四、引用原则
1、主包不可以引用分包的资源,但分包可以使用主包的公共资源。
2、分包与分包之间资源无法相互引用,分包异步化时不受此条限制。
五、独立分包
能够独立于主包和其他分包运行的包。从独立分包中页面进入小程序时,不需要下载主包,当用户进入普通分包或主包内页面时,主包才会被下载。可以将功能相对独立的页面配置到独立分包中。
声明对应的独立分包,给subPackages定义的分包结构添加independent字段即可。
"subPackages": [{"root": "modules/marketModel","name": "marketModel","pages": ["pages/market/market"],"independent": true}]
注意事项:
1、独立分包中不能依赖主包和其他分包中的资源。
2、主包中的app.wxss对独立分包无效。
3、App只能在主包内定义,独立分包中不能定义App,会造成无法预期的行为。
六、分包预下载
访问小程序某个页面时,预先下载其他分包中的代码和资源,当用户需要访问分包中的页面时,已经预先下载的代码和资源,因此可以直接使用。
分包预下载需要在app.json中通过preloadRule字段设置预下载规则。
- 主包预下载分包
"preloadRule":{"pages/index/index":{"network": "all","packages": ["goodModel"]}}
"pages/index/index":访问该页面时,进行预下载。
"packages": ["goodModel"]:预下载页面别名(也可以是路径)。
预下载成功时,控制台显示
- 独立分包预下载主包
"preloadRule":{"modules/marketModel/pages/market/market":{"network": "all","packages": ["__APP__"]}}
"__APP__":主包关键字。