小程序进行合理分包加载的一些策略
如果对分包不了解,请先阅读分包加载 | 微信开放文档,至少需要阅读使用分包、独立分包、分包预下载三节,此处仅是一种实践,更灵活的用法以官方和具体场景决定。如有错误,恳请指正。
推荐的主包和分包的一种文件组织的目录结构如下:
├── sub-pages
│ ├── my
│ │ ├── setting
│ │ └── address
│ ├── home
│ │ └── goods-list
│ ├── activity
│ │ └── activity-detail
│ └── contact-info
│ └── contact-qr-code
├── pages
│ ├──base
│ │ ├── login
│ │ └── 404-page
│ ├── home
│ └── my
└── utils
上述解释为:
- pages中base为基础页面,包含登录、注册、更新用户头像、昵称、404等基础页面;其他目录为tab页面,如下仅有home和my页面;
- sub-pages目录存放分包,一级目录为tab对应的模块或者其他独立的模块,此处为my、home、activitys;
- 此处goods-list因页面跳转关系,需要关联activity-detail和my下所有页面,所以在分包的基础上进行关联预下载。
- contanct-info为联系信息,仅通过第三方小程序跳转,作为独立分包的示例;
对应的app.json配置如下
{
"pages":[
"pages/home/home",
"pages/my/my",
"pages/base/login/login",
"pages/base/404-page/404-page",
],
"subpackages": [
{
"root": "sub-pages/my",
"pages": [
"address/address",
"setting/setting"
]
}, {
"root": "sub-pages/home",
"pages": [
"goods-list/goods-list"
]
},
{
"root": "sub-pages/activity",
"name": "activity-sub",
"pages": [
"activity-detail/activity-detail"
]
},
{
"root": "sub-pages/contact-info",
"pages": [
"contact-qr-code/contact-qr-code",
],
"independent": true
}
],
"preloadRule": {
"sub-pages/home/goods-list/goods-list": {
"network": "all",
"packages": ["activity-sub","sub-pages/my"]
}
}
}
如有错误,恳请指正。