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

1 小程序性能优化

小程序性能优化指南

1.1 分包

1.1.1 分包原因

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

1.1.2 分包配置

• 官网文档

  • subPackages
  • 

• page.json配置

  • search.vue和search-result.vue要放到subPackages/search文件夹下

{
	"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 重新上传

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