uniapp 小程序分包加载
https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages
1、因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。
2、主包:即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本
分包:是根据pages.json的配置进行划分
3、小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示,此时终端界面会有等待提示。
4、小程序的分包配置,其目的不用于下载提速,而用于首页是vue时的启动提速。
5、subPackages:节点接收一个数组,数组每一项都是应用的子包
root:子包的根目录
pages:子包由哪些页面组成,参数同 pages
6、subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
百度小程序每个分包的大小是2M,总体积一共不能超过8M。
分包下支持独立的 static 目录,用来对静态资源进行分包
7、针对vendor.js过大的情况可以使用运行时压缩代码:cli创建的项目可以在package.json中添加参数--minimize
preloadRule:分包预载配置
配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度
- packages:进入页面后预下载分包的 root 或 name。APP 表示主包。
- network:在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
关于分包优化的说明
1、配置下添加"optimization":{"subPackages":true}开启分包优化
2、分包优化具体逻辑
静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
3、每个分包root对应目录下的静态文件会被打包到此分包内。