开发实战 - 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 重新上传

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