开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,查看详情

遇到的问题: uni-app开发小程序,项目包过大,导致无法发版

开发背景: 1. 小程序有所限制,整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包 2. 由于项目不断更新迭代,经常不经意地就出现了主包或者单包过大的情况

那么,我们怎么避免这个问题呢,以下是我在开发过程中所用到的一些方法

1. 首先学会检查各个包的大小

在基本项目 > 代码依赖分析 > 查看各个的大小

2. 当已经出现主包过大了的情况

把图片放在服务器上,将本地的图片删除,减少内存

<image src="http://********/cloud/applet/my/myBgc.png" class="myBgc"></image>

分包在pages.json文件建分包

{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarTextStyle": "#FFFFFF",
				"navigationBarBackgroundColor": "#299BD6"
			}
		},
		
	],
	"subPackages": [{
			"root": "car",
			"pages": [{
					"path": "index/index",
					"style": {
						"navigationBarTitleText": "车辆预约",
						"navigationBarTextStyle": "#FFFFFF",
						"navigationBarBackgroundColor": "#299BD6"
					}
				},
			]
		},
		{
			"root": "working",
			"pages": [{
				"path": "working/working",
				"style": {
					"navigationBarTitleText": "uni-app"
				}
			}]
		},
		{
			"root": "warehouse",
			"pages": [
			{
				"path": "carApprove/carApprove",
				"style": {
					"navigationBarTitleText": "车辆授权",
					"navigationBarTextStyle": "black",
					"navigationBarBackgroundColor": "#FFFFFF"
				}
			}
			]
		},
		{
			"root": "supplyChain",
			"pages": [{
				"path": "supplyChain/supplyChain",
				"style": {
					"navigationBarTitleText": "uni-app"
				}
			}]
		},
		{
			"root": "reportManagement",
			"pages": [{
				"path": "index/index",
				"style": {
					"navigationBarTitleText": "报表管理",
					"navigationBarTextStyle": "black",
					"navigationBarBackgroundColor": "#FFFFFF"
				}
			}
			]
		}
		
	]
}

分包运行时压缩代码运行 > 运行小程序模拟器 > 运行时是否压缩代码详情 > 本地设置 > 上传代码时是否压缩样式

避免代码冗余,把能封装的都封装成组件,在页面上引用
注意: 主包不能拿到分包里面的资源

uni-app 解决项目包过大的问题

1. 首先学会检查各个包的大小

2. 当已经出现主包过大了的情况