uniapp创建多个分包，解决代码过多文件超出上传不了的问题

问题：小程序目前限制是不超过2m，包体积超过2m了就建议使用分包了，不然预览不了代码也传不上去，分包可以创建多个，每个分包体积最大为2m，小程序总体积（包含分包）不能超过20m。有小伙伴提问了，为什么小程序主包最多不超20m，你猜它为什么要叫小程序。20m可以满足大多数需求了。

注意！！分包只能做非tabbar页面的操作，如果页面需要使用tabbar，主页面和tabbar页面只能放在主包pages里

1.创建俩个分包页面，和pages文件夹同级最好，一目了然

内容随便

2.在pages.json中创建多个分包

root：路由嘛，从subpackage/文件夹下的path路由地址找到

name:分包名字，写不写无所谓

navigationBarTitleText："导航标题"

enablePullDownRefresh:false,不开启下拉刷新

navigationStyle：导航栏样式默认

	"subPackages": [
		{
			"name":"subpackage",
			"root": "subpackage/",
			"pages": [
				{
					"path": "subPage/subPage",
					"style": {
						"navigationBarTitleText": "分包标题",
						"enablePullDownRefresh": false,
						"navigationStyle": "default"
					}
				}
			]
		},
		{
			"name":"subpage2",
			"root": "subpage2/",
			"pages": [
				{
					"path": "page/page",
					"style": {
						"navigationBarTitleText": "分包标题22",
						"enablePullDownRefresh": false,
						"navigationStyle": "default"
					}
				}
			]
		}
	]

3.主包跳转到分包

<template>
	<view class="content">
		<image class="image-bg" src="/static/logo.png" />
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button @click="sub">跳转分包1</button>
		<button @click="subtwo">跳转分包2</button>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				title: 'Hello',
				statusBarHeight: 20,
				richText: '',
			}
		},
		onLoad() {

		},
		methods: {
		sub(){
			uni.navigateTo({
				url:"../../subpackage/subPage/subPage"
			})
		},
		subtwo(){
			uni.navigateTo({
				url:"../../subpage2/page/page"
			})
		}
		},
	}
</script>

<style>
	.content {
		background-color: #ddd;
		height: 520rpx;
		position: relative;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-bg {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

4.效果

 

 5.测试分包是否创建成功

点开微信开发者工具的这个图标可以看到主包分包的大小

 

 6.扩展压缩代码

hbuilder运行到微信开发者工具勾上压缩代码

微信开发者工具点击详情==》本地设置，勾上这些

 

 小程序代码的mainfest.json中点击微信小程序勾上这俩，es6转es5勾不勾都行

文章到此结束希望对你有所帮助~