uni-app分包

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>

  效果如下：