微信小程序每个分包的大小是2M,总体积一共不能超过20M。当我们新建的页面越来越多的时候,主包的内存就会越来越大,所以分包加载机制是很有必要的
官方文档地址:https://uniapp.dcloud.io/collocation/pages?id=subpackages
首先我们在pages同级目录下创建几个a、b、c、d文件夹,里面放置需要分包的页面,
然后找到根目录下的pages.json文件,配置分包路由
在pages数组的后面,配置分包机制
配置subPackages 节点、preloadRule分包预载配置
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "list/list",
"style": {
"navigationBarTitleText": "list"
}
},
{
"path": "search/index",
"style": {
"navigationBarTitleText": "搜索"
}
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/detail",
"style": {
"navigationBarTitleText": "detail"
}
}]
},
{
"root": "pagesC",
"pages": [{
"path": "integral/integral",
"style": {
"navigationBarTitleText": "integral"
}
}]
},
{
"root": "pagesD",
"pages": [{
"path": "wallet/wallet",
"style": {
"navigationBarTitleText": "wallet"
}
}]
}
],
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["pagesA", "pagesB", "pagesC", "pagesD"]
}
},
完成,控制台输出分包配置成功的信息!
假如pages里的某个页面要跳转到pagesA或者其他分包里的某个页面,怎么办?只需修改路由跳转的路径即可 比如
uni.navigateTo({
url: '/pagesA/search/index' //或者这样 url: '../../pagesA/search/index'
})