在使用uniapp开发过程中，随着我们的代码工程越来越大，必然会面临一个问题，就是打出来的包会越来越大，而大到一定程度的时候，部分小程序平台就发布不上去，这个时候我们就要考虑使用分包来避免这样的问题。
说到分包，这里面有两个概念：主包与子包（分包）。
（1）主包：小程序首次启动的时候，默认就会加载的包，在没有分包的情况下整个工程就可以看做是一个主包，小程序为了支撑起第一次启动后页面的展示，会加载所有的包资源，不管页面中有些模块有没有用得到，都会加载，这样势必就会导致在首次启动的时候，由于包的体积过大，加载时间过长，造成用户体验就不是很好，考虑到这一个层面，各家的小程序包都是有大小限制的，因为你不能让小程序变得臃肿得像个APP，那样就失去了小程序轻巧、方便的意义了。
（2）子包（分包）：为了避免在第一次启动的时候，加载的主包过大，这个时候我们就可以考虑将主包进行拆分，拆分为一些小的子包，这样在启动的时候，我们只要加载主包，足够支撑第一次页面展现即可，在后续点击子模块的时候，再逐个根据需要加载对应的子包，这样就避免了主包过大的问题。当然每个子包也是有大小限制的。具体可以参考官方文档
下面就简单说一下如何进行分包：
一、目录结构拆分：
┌─pages //主包的页面
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─pagesA //A分包
│ ├─static //分包可以拥有自己独立的static目录，用来对静态资源进行分包
│ └─list
│ └─list.vue
├─pagesB //B分包
│ ├─static
│ └─detail
│ └─detail.vue
├─static //主包的静态资源
├─main.js
├─App.vue
├─manifest.json
└─pages.json
二、编辑page.json文件
{
//主包的路由配置
"pages": [{
"path": "pages/index/index",
"style": { ...}
}, {
"path": "pages/login/login",
"style": { ...}
}],
//定义好子包，可以包含多个子包
"subPackages": [{
//A包的根路径，各个子页面访问路由是：root路径 + 子页面的path
"root": "pagesA",
"pages": [{
//A包的子页面路径(相对于root路径)
"path": "list/list",
"style": { ...}
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/detail",
"style": { ...}
}]
}],
//定义预加载
"preloadRule": {
//当访问到该路由的页面时，会顺带预加载对应的包(可以是主包，也可以是子包)
"pagesA/list/list": {
"network": "all",
"packages": [""] //：标识预加载主包
},
"pagesB/detail/detail": {
"network": "all",
"packages": ["pagesA"] //预加载A子包，预加载的包也可以是多个
}
}
}
三、分包预载配置
通过配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
示意图
四、各平台小程序包大小限制说明：
- 微信小程序每个分包的大小是2M，总体积一共不能超过20M。
- 百度小程序每个分包的大小是2M，总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。
- QQ小程序每个分包的大小是2M，总体积一共不能超过24M。
- 字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。
五、注意事项：
- 如果首次加载的主包的页面引用到了子包的模块或者组件，需要把被引用的子包放到主包上来，否则可能会出现加载的一些错误，因为子包一般是延时加载的，在主包第一次加载的时候，需要引用子包的时候，这个时候子包还没来得及下载下来，就会出现找不到对应的组件或者模块的错误。
网友评论