开发实战 - ego商城 - 补充：小程序性能优化

1 小程序性能优化

1.1 分包

1.1.1 分包原因

上传时提示主包大小超过最大体积2MB.

1.1.2 分包配置

官网文档
- subPackages
page.json配置
- search.vue和search-result.vue要放到subPackages/search文件夹下

json 复制代码

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "百年奥莱",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationStyle": "custom"
			}
		},
		...
	],
	"subPackages": [
		{
			"root": "subPackages/search",
			"pages": [
				{
					"path": "search",
					"style": {
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationStyle": "custom"
					}
				},
				{
					"path": "search-result",
					"style": {
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationStyle": "custom"
					}
				}
			]
		}
	],
}

实现：pages.json分包配置&组件移动
效果

1.1.3 其他文件适配

组件移动
- 1.1.2已提到， search.vue和search-result.vue要放到subPackages/search文件夹下
- 将页面组件用到的公共组件（没有被主包其他组件引用）也移到subPackages/search下，如新建一个components存放
- 实现：公共组件移动
页面路径
- 例如首页index.vue点击放大镜跳转搜索页search.vue，需要将uni.navigateTo() 的url里的pages改为subPackages
- 实现：页面跳转路径修改
图片路径
- 将原来只给搜索模块组件使用的图片从static/search移动至subPackages/search/static下，同时，也要刷新搜索模块组件引用图片的路径
- 实现：图片路径修改

1.1.4 主包体积仍较大-原因排查

主包体积仍>2M
- 图片体积过大，将static/img的图片只保留changtu.jpg和taishan1.jpg，同时接口返回的图片url刷新为保留的两张图片的url。
实现：保留两张风景图
效果
- 主包体积减少到1.2MB

1.1.5 重新上传

上传成功，看来代码压缩不通过不影响上传包。