小程序的容量大小是2MB一但超过就会提示不能上传或真机,这时候通过分包可以解决,分包一般放的是tabBar主页下面的跳转页面
分包构视图
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
常规分包
pages是主包优先加载,packageA,packageB是分包需要使用时才会加载
如图所示在pages同层级新建文件夹
在分包下分别再新建一个文件夹,叫pages,里面放要分开的页面文件夹
在app.json里进行配置
{ "pages":[ //主包 "pages/index", "pages/logs" ], "subpackages": [ //分包 { "root": "songPackage", //分包根的目录 "pages": [ "pages/recommendSong/index", "pages/songDetail/index" //分包页面路径,相对与分包根目录 ] }, { "root": "otherPackage", //分包根的目录 "pages": [ "pages/other/index" //分包页面路径,相对与分包根目录 ] } ] }
注,分包后引入其它东西的路径
打开详情,后可以查看分包情况
总结 : a) 加载小程序的时候先加载主包,当需要访问分包的页面时候才加载分包内容
b) 分包的页面可以访问主包的文件,数据,图片等资源
c) 主包: i. 主包来源: 除了分包以外的内容都会被打包到主包中
ii. 通常放置启动页/tabBar 页面
独立分包
如图所示只需要在json页面下添加一个属性即可,独立分包一般用于,使用临时增加的广告页面,活动页面,注:独立分包不可不能依赖主包或者其他包的内容
总结:a) 独立分包可单独访问分包的内容,不需要下载主包
b) 独立分包不能依赖主包或者其他包的内容
分包预下载
分包预下载属性必须要和常规分包的属性同一层级如图
在preloadRule里使用要预加载的页面
可以在里面添加一些,其它属性
network:all
(不限网络) / wifi (
仅wifi下预下载)
"preloadRule": {
"pages/index/index": {
"network": "all", "packages": ["songPackage"] },
}
packages里也可加载主包,用于独立分包
"indep/index": { "packages": ["__APP__"] }
总结:
a) 在加载当前包的时候可以设置预下载其他的包
b) 缩短用户等待时间,提高用户体验