目录
一. 分包的概念
1. 什么是分包
2. 分包的好处
3. 分包后项目的构成
4. 分包加载规则
5. 分包体积限制
二. 分包的方法
1. 分包后的目录结构
2. 配置manifest.json
3. 配置pages.json文章来源:https://www.toymoban.com/news/detail-665116.html
4. 全局修改分包文件路径文章来源地址https://www.toymoban.com/news/detail-665116.html
一. 分包的概念
1. 什么是分包
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
2. 分包的好处
1. 优化小程序首次启动多个消灾时间 2. 方便团队开发,解耦协作
3. 分包后项目的构成
一个主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源 多个分包:只包含和当前分包有关的页面和私有资源
4. 分包加载规则
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
5. 分包体积限制
1. 整个小程序所有分包大小不超过20M(主包+所有分包) 2. 单个分包/主包大小不能超过2M
二. 分包的方法
1. 分包后的目录结构
├── pages // 主包 │ ├── index │ └── logs ├── packageA // 分包A │ └── pages │ ├── cat │ └── dog ├── packageB // 分包B │ └── pages │ ├── apple │ └── banana ├── manifest.json // 配置项 └── pages.json // 页面路径
2. 配置manifest.json
"mp-weixin":{
"optimization":{
"subPackages":true // 开启分包优化
}
}
3. 配置pages.json
在pages.json中新建"subPackages"数组,"preloadRule"对象
1. "subPackages"数组中包含两个参数:
1.root:为子包的根目录
2.pages:子包由哪些页面组成,参数同pages
注意:主包和分包是不能在同一目录下,所以在构建项目时,要考虑目录结构,以便后期进行分包
2. "preloadRule"中,key 是页面路径,value 是进入此页面的预下载配置
1. network指定网络下预下载可选wifi/all(非必填)
2. packages进入也买你后预下载的分包(必填)
{
"pages": ["pages/index"], // 主包内页面
"subpackages": [
{
"root": "packageA", // 分包A
"pages": [
{
"path" : "pages/cat"
},
{
"path" : "pages/dog"
}
]
},
{
"root": "packageB", // 分包B
"pages": [
{
"path" : "pages/apple"
},
{
"path" : "pages/banana"
}
]
}
],
"preloadRule": { // 分包预载配置
"pages/index": { // 在进入小程序pages/index页面时,由框架自动预下载分包A、分包B
"network": "all",
"packages": ["packageA","packageB"]
}
}
}
4. 全局修改分包文件路径
webstorm 可通过 ctrl+shift+R 替换所有路径
到了这里,关于uniapp微信小程序分包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!