uniapp小程序分包配置
目前微信小程序未分包的大小限制为2M,可想而知本地稍微有点静态资源就不够用了,于是这里微信小程序提供了分包的解决方案。最新的使用分包限制为20M、每个分包限制为2M,也就是说我们最多可以有10个包,可以满足大部分应用的需求。
这里基于uniapp框架来介绍小程序分包配置。
第一步:新建uniapp项目,添加memberpages和otherpages目录结构如下:
...
├─memberpages
| ├─index
| | ├─index
├─otherpages
| ├─index
| | ├─index
| ├─detail
| | ├─detail
├─pages
| ├─index
| | ├─index
├─App.vue
├─main.js
├─manifest.json
├─pages.json
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
第二步:修改pages.json文件,主要是对subPackages和preloadRule字段修改,具体查看官方文档subPackages、preloadrule
subPackages:分包数组,每个元素为一个分包。分包内包含root(分包根路径)、pages(root下的页面子路径配置同主包pages配置)
preloadrule:预加载对象配置,key为页面路径,value为进入此页面的预下载配置。value包含packages(分包名称也就是分包root配置)、network(指定网络下载分包)
{
"subPackages": [{
"root": "memberpages",
"pages": [
{
"path": "index/index",
"style": {}
}
]
},
{
"root": "otherpages",
"pages": [
{
"path": "index/index",
"style": {}
},
{
"path": "detail/detail",
"style": {}
}
]
}
],
"preloadRule": {
"pages/index/index": {
"network":"all",
"packages": ["indexpages"]
},
"memberpages/index/index": {
"network":"all",
"packages": ["promotionpages"]
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
上次更新: 2025/09/05, 8:09:00