Uniapp是一款多端开发框架,支持开发微信小程序、H5、APP等多端应用。在开发微信小程序时,由于小程序限制单包大小必须不超过2MB,而一些项目需要引入大量的第三方库和图片资源,因此需要采用分包的方式来解决单包大小限制的问题。
一、分包原理
Uniapp中的分包原理是将项目中的文件按照指定的规则拆分成多个包,这些包在小程序启动后会异步加载并进行合并。当需要使用分包中的某个组件或页面时,Uniapp会自动加载该分包,并且只有在需要的时候才会加载分包中的其他组件和页面,以此来减小小程序的启动时间和提高用户体验。
分包的实现原理是在app.json文件中指定subpackages字段,该字段是一个数组类型,里面每一个对象都代表一个分包,并包含以下字段:
1. name:分包名称,必填项。
2. root:分包文件路径,相对于根目录,必填项。
3. pages:分包中的所有页面路径,可选项。
其中,name字段表示分包名称,将多个页面放在同一个分包中,可以方便的根据业务划分分包;root字段表示分包路径,也就是指定分包中页面所处的文件夹路径;pages字段可选,如果不指定pages,则表示该分包仅仅包含组件和其他资源文件,不包含页面。
二、分包示例
1. 在app.json文件中添加subpackages字段:
```javascript
{
"pages": [
"pages/index/index",
],
"subPackages": [
{
"name": "package1",
"root": "pages/package1/",
"pages": [
"package1-page1"
]
},
{
"name": "package2",
"root": "pages/package2/",
"pages": [
"package2-page1"
]
}
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/package1/package1-page1",
"text": "第一个分包"
},
{
"pagePath": "pages/package2/package2-page1",
"text": "第二个分包"
}
]
}
}
```
上述代码中我们可以看到:
- 三个文件夹(一个根文件夹,两个分包)
- 文件夹名包含多个单词(需用连字符隔开)
- 每个分包中只有一个页面
- 分包包含的页面路径,最终打包时会被合并至分包对应的目录
2. 打开微信开发者工具,可以在工具栏中找到“分包分析”按钮,点击后可以查看应用在各个分包之间的资源大小和依赖关系。
![image](https://cdn.nlark.com/yuque/0/2021/png/10872165/1613063421692-0d70ade6-3b4e-4d3a-8a8c-a99b068b0f13.png#align=left&display=inline&height=212&margin=%5Bobject%20Object%5D&name=image.png&originHeight=212&originWidth=781&size=16516&status=done&style=none&width=781)
在上述分析结果中,我们可以看到wxss、js、wxs、json等文件按照各个分包进行资源拆分,根据分析结果,我们可以对分包做一些优化和调整,例如单独拆出一些公共组件放到公共分包中,以此减小分包的大小。
三、注意事项
1. 分包名称不能重复。当分包名相同时,后面的分包会覆盖前一个分包。
2. 分包路径必须以/结尾,指定路径时,不建议使用../的相对路径。
3. 分包中的文件不能超过1MB,否则无法预加载。对于超过1MB的文件,建议使用动态加载的方式。
4. 注意分包的文件夹结构,确保不同分包中的文件不会有路径冲突。
总之,Uniapp中的分包机制,可以方便地将大型应用的代码拆分成多个小包,从而减小单个包的大小,提高小程序的启动速度和用户体验。