uniapp在实现多端打包的情况下,由于小程序的打包限制大小,因此前期会提前做好分包
好处:
- 小程序的分包,除了联网分段下载外,还可以减轻启动时加载的js数量,可以提升启动速度。
- 从uni-app 2.7.12+ 开始,App-vue平台也兼容了小程序的分包配置,但默认并不开启。
在manifest配置以下节点,可以在App端启动分包。
启用之后,就需要在pages.json中配置具体的分包规则(与小程序的配置相同),注意:就是一旦在pages.json里配置分包,小程序一定生效,而app是否生效,取决于manifest里是否开启。
官网中的一些注意事项:
- App开启分包后,每个分包单独编译成一个js文件(都包含在app内,不会联网下载),当App首页是vue时,可减小启动加载文件大小,提升启动速度。
- 首页是nvue时,分包不会提升启动速度,nvue本身启动速度就快于vue,也快于开启分包后的首页为vue的应用。如果追求极致启动速度,还是应该使用nvue做首页并在manifest开启fast模式。
- App页面较少时,分包对启动速度的优化不明显
分包加载配置subPackages
参照官网的:假设分包的uniapp目录如此:
pages.json中代码配置:
{
"pages": [{
"path": "pages/index/index",
"style": { ...}
}, {
"path": "pages/login/login",
"style": { ...}
}],
"**subPackages**": [{
"root": "pagesA",
"pages": [{
"path": "list/list",
"style": { ...}
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/detail",
"style": { ...}
}]
}],
"preloadRule": {
"pagesA/list/list": {
"network": "all",
"packages": ["__APP__"]
},
"pagesB/detail/detail": {
"network": "all",
"packages": ["pagesA"]
}
}
}
不同的目录将根目录抽出,作为一个包的根目录,然后将其子目录放到pages数组对象中