分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。以达到优化小程序响应速度的目的。 可以看微信官方给的解释:小程序性能优化指南 | 微信开放社区
小程序官方文档: 分包加载 | 微信开放文档
uniapp 分包文档:pages.json 页面路由 | uni-app官网
一:分包相关概念
本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术。主包与分包的概念
1). 主包:本项目中初始化时所必须的页面。
2). 分包:除主包外的所有页面都应放置在分包内,为避免读者混淆,本文会将该分包定义为子包
项目在启动时,将从主包进入,分包在用户未进入时不会加载,只有在进入分包模块时才会加载。
tabbar页面以及模块间共有的页面,如果该项目有账号限制(即非注册账号不可进入主界面),也应将登录页放置在主包内。
二:为什么要分包
1. 优化小程序首次启动多个消灾时间
2. 方便团队开发,解耦协作
优化项目首次启动的下载时间;小程序默认就是整包(主包)下载,但这会导致整个项目只有在全部加载完毕后才会回显到用户眼前,这样虽然可以使用加载动画进行优化,但也会有部分可能导致用户流失;
防止项目超出小程序官方对小程序项目打包后的大小限制;
若不分包,整个程序最大限制不能超过2M,分包后,整个项目(包含主包+子包)最大不能超过16M,单个包不能超过2M (这样就规避了项目最大不得超过2m的限制)
三: 分包基本逻辑
静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
四: 分包规则
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。体积限制
1. 整个小程序所有分包大小不超过20M(主包+所有分包)
2. 单个分包/主包大小不能超过2M
五、分包的方法
1. 假如分包后的目录结构
├── pages // 主包
│ ├── index
│ └── logs
├── packageA // 分包A
│ └── pages
│ ├── cat
│ └── dog
├── packageB // 分包B
│ └── pages
│ ├── apple
│ └── banana
├── manifest.json // 配置项
└── pages.json // 页面路径
2. 配置manifest.json
"mp-weixin":{"optimization":{"subPackages":true // 开启分包优化}
}
3. 配置pages.json
在pages.json中新建"subPackages"数组,"preloadRule"对象
1. "subPackages"数组中包含两个参数:
1.root:为子包的根目录
2.pages:子包由哪些页面组成,参数同pages
注意:主包和分包是不能在同一目录下,所以在构建项目时,要考虑目录结构,以便后期进行分包
2. "preloadRule"中,key 是页面路径,value 是进入此页面的预下载配置
1. network指定网络下预下载可选wifi/all(非必填)
2. packages进入也买你后预下载的分包(必填)
{"pages": ["pages/index"], // 主包内页面"subpackages": [{"root": "packageA", // 分包A"pages": [{"path" : "pages/cat"},{"path" : "pages/dog"}]},{"root": "packageB", // 分包B"pages": [{"path" : "pages/apple"},{"path" : "pages/banana"}]}],"preloadRule": { // 分包预载配置 "pages/index": { // 在进入小程序pages/index页面时,由框架自动预下载分包A、分包B"network": "all","packages": ["packageA","packageB"]}}
}
如果分包预加载配置成功,会在开发者工具控制台输出以下内容:
六、分包路由跳转
在 app.vue 中,你可以使用 uni.navigateTo 或 uni.redirectTo 方法来跳转到分包页面
假设你的分包名为 subpackage,分包中有一个页面 subpackage/pages/index/index.vue,你可以使用以下代码实现跳转:
uni.navigateTo({url: '/subUsers/pages/login/index',})uni.redirectTo({url: '/subUsers/pages/login/index',})