一、目的
分包的目的:
提升小程序的首屏加载速度,其原理和PC端网页的路由懒加载非常类似。即当我们第一个打开一个小程序的时候,只加载主包以及一些公共的资源,当调到某个页面的时候,在加载该页面所在的分包,目前微信小程序,总包大小不操作20M,分包的各种不超过10个,每个大小不超过2M。
预加载:预先加载的意思,进一步提示小程序的渲染速度。
二、分包
uniapp 实现分包:
1、在manifest.json文件中开启分包模式
/* 小程序特有相关 */"mp-weixin": {"optimization": {"subPackages": true}},
2、针对每个分包建立独立的文件夹,文件夹里面一般包含 pages/static 两个文件夹,分别用于存放当前分包的页面和静态资源(图片)
3、在pages.json中声明分包的结构
//声明分包结构"subPackages": [//数组中的一个对象就对应着一个分包{"root": "goods-package",//分包的文件夹的名称//该分包中的页面路径"pages": [{"needLogin": false,"path": "pages/goodDetail/goodDetail"}]},],
在微信开发者工具中可以看到分包的结构
原生小程序分包:
1、配置 app.json 文件
{"pages": [// 主包里面的页面路径配置"pages/tabBar/index/index","pages/login/adminLogin/login",...],"subpackages": [// 分包的配置{"root": "plateMake", // 分包包名"name": "车牌预约","pages": [// 分包的页面配置"views/index/index",...]},... // 其他分包配置]// 省略其他...
}
写完分包之后,如果对应的文件夹和页面不存在,它会自动创建文件夹和页面。
其他设置及页面同 uniapp 的一样
三、预加载
uniapp:
在pages.json中配置
"preloadRule":{//key(在哪个页面中需要做分包的预加载):value(预加载的一些配置)"pages/category/category":{"network": "all","packages": ["goods-package"]//需要预加载的分包}
},
原生开发:
在 app.json
增加 preloadRule
配置来控制。
{"pages": ["pages/tabBar/index/index",...],"subpackages": [{"root": "plateMake","name": "车牌预约","pages": ["views/index/index",...]},{"root": "indep","pages": ["index"],"independent": true}],"preloadRule": {"pages/tabBar/index/index": {"network": "all","packages": ["important"]},"indep/index": {"packages": ["__APP__"]}}
}
preloadRule
中,key
是页面路径,value
是进入此页面的预下载配置,每个配置有以下几项:
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name 。__APP__ 表示主包。 |
network | String | 否 | wifi | 在指定网络下预下载,可选值为:all : 不限网络wifi : 仅wifi下预下载 |
限制
同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。
如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。