uni-app分包
问题引入:为什么uni-app分包?
原因:小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。而uni-app是做跨端开发看,所以也就引入了分包机制。App默认为整包。从uni-app 2.7.12+ 开始,也兼容了小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。App下开启分包,除在pages.json中配置分包规则外,还需要在manifest中设置在app端开启分包设置,详见:https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization
总结分包的好处:启动加载主包,按需要加载分包。提高进入页面时的加载速度,不至于必须等所有页面加载完
1.分包注意事项
- 微信小程序每个分包的大小是2M,总体积一共不能超过20M。
- 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
- QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
- 字节小程序每个分包的大小是2M,总体积一共不能超过16M。
具体请查看官网:分包-uniapp
将uni-app运行到微信开发者工具,可查看主包和分包的大小
2.在pages同级创建分包
3.pages.json配置
注意:在subPackages里配置了页面路由,就不要再pages配置页面路由了
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path" : "pages/message/message",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"subPackages": [
{
"root": "subPages",
"pages": [{
"path": "detail/detail",
"style": {
}
}]
}
],
"preloadRule": {
"pages/list/list": {
"network": "all",
"packages": ["subPages"]
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
代码分析:
1)上面代码preloadRule配置表示意思是:进入pages/list/list就预下载subPages分包,提升提升进入后续分包页面时的启动速度。
2)上面代码subPackages配置:
注意:subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:
属性 | 类型 | 是否必填 | 描述 |
---|---|---|---|
root | String | 是 | 子包的根目录 |
pages | Array | 是 | 子包由哪些页面组成(数组) |
4.怎么跳转分页的呢?
在需要点击跳转的地方就好啦
代码如下:
<template>
<view>
<button type="primary" size="mini" @click="clickButton">get请求</button>
<view v-for="(item, index) in arr" :key="index" class="link" @click="jumpPage(item.id)">
{{item.name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr: []
}
},
methods: {
async clickButton() {
let _data = await this.$mpApi.getListData({
url: '/api/books',
method: 'GET',
data: {}
});
this.arr = _data.data;
},
jumpPage(id) {
uni.navigateTo({
url: '/subPages/detail/detail'
})
}
}
}
</script>
<style>
.link {
color: #007AFF;
}
</style>
效果如下: