uniapp小程序的减少包大小的方法

209 阅读1分钟

一、图片压缩

图片压缩网站:tinypng.com/

图片转base64:c.runoob.com/front-end/5… (因为小程序中background属性只能用在线链接或者base64编码)

二、勾选"运行时压缩代码"

在hbuilder的顶部工具栏上, 运行->运行到小程序模拟器->勾选"运行时是否压缩代码"

三、图片尽量上传到阿里云oss平台,使用外链图片

四、分包

分包目的在于提高小程序的体积,多一个包就多2M,最多20M

常规的分包:

小程序一打开首先加载主包,然后再加载分包

重点:

分包可以用主包内的资源,主包不可以使用分包的资源

分包A不可以使用分包B里面的内容

分包可以使用app.wxss里面的全局样式

小贴士:只在分包用的第三方插件尽量放在分包中,除非是主包需要公用的才放到主包中,如下图:

image.png

分包步骤如下:

1.在pages.json中添加如下字段,root:是包的名称,pages:是添加的路径,independent:是设置独立分包.

"subPackages": [{
		"root": "packageA",
		"pages": [{
			"path": "pages/equipmentdetail/equipmentdetail",
			"style": {
				"navigationBarTitleText": "详情",
				"enablePullDownRefresh": false
			}
		}]
	}, {
		"root": "packageB",
		"pages": [{
				"path": "pages/devicedetails/devicedetails",
				"style": {
					"navigationBarTitleText": "设备详情",
					"enablePullDownRefresh": false
				}
			},
			{
				"path": "pages/alarminfo/alarminfo",
				"style": {
					"navigationBarTitleText": "报警信息",
					"enablePullDownRefresh": false
				}
			},
			{
				"path": "pages/devicemanage/devicemanage",
				"style": {
					"navigationBarTitleText": "设备设置",
					"enablePullDownRefresh": false,
					"navigationStyle": "custom"
				}

			},
			{
				"path": "pages/basicinfo/basicinfo",
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}

			},
			{
				"path": "pages/areaacquisition/areaacquisition",
				"style": {
					"navigationBarTitleText": "区域采集",
					"enablePullDownRefresh": false
				}

			},
			{
				"path": "pages/camerascanning/camerascanning",
				"style": {
					"navigationBarTitleText": "摄像头扫描",
					"enablePullDownRefresh": false
				}

			},
			{
				"path": "pages/sizesetting/sizesetting",
				"style": {
					"navigationBarTitleText": "储罐尺寸设置",
					"enablePullDownRefresh": false
				}

			},
			{
				"path": "pages/pressuresensor/pressuresensor",
				"style": {
					"navigationBarTitleText": "压力传感器设置",
					"enablePullDownRefresh": false
				}

			},
			{
				"path": "pages/liquidlevelsensor/liquidlevelsensor",
				"style": {
					"navigationBarTitleText": "液位传感器设置",
					"enablePullDownRefresh": false
				}
			}, {
				"path": "pages/addEquipment/addEquipment",
				"style": {
					"navigationBarTitleText": "新增",
					"enablePullDownRefresh": false
				}

			}, {
				"path": "pages/unLoginAddEquip/unLoginAddEquip",
				"style": {
					"navigationBarTitleText": "新增",
					"enablePullDownRefresh": false
				}

			}, {
				"path": "pages/unLoginDeviceManage/unLoginDeviceManage",
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}

			}
		]
	}]
}