混合开发之选型的重要性

46 阅读2分钟

记录

image.png

上图是我重构的提交记录

历史缘由

  1. 刚来到公司, 老项目是纯android开发的. 现在需要android套壳(webview+h5)的方式进行开发
  2. 为啥不用纯android, 二点: 发版审核麻烦, 核心逻辑与样式变更
  3. 干呗

选型

  1. 由于有pc+移动端, 功能一样. 就是样式不同
  2. 项目很急, 直接选型 vue2 + uniapp, 目的为了适配(最后还是开发了二套)
  3. 开干, 玩的就是真实

痛点

  1. 代码不能实时更新 (通过hmr,端口访问)
  2. 调用安卓接口卡死界面, 没有loadding 异步添加
  3. 最主要的还是慢

编码和测试

  1. 二人耗时二月, 交付项目.
  2. 测试项目, 上线

上线问题

  1. 客户需求变更
  2. 偶发bug处理
  3. 连续交易50笔程序直接崩溃

开始寻找问题

  1. 排查问题, 通过安卓开发软件的监控中得不到结论
  2. 安卓排查代码回收情况,貌似正常
  3. 前端使用纯vue写测试demo
  4. 直接使用纯html的方式写测试demo
  5. 就是看内存会不会回收,忽高忽低就是正常的
  6. 我们为了找到问题, 费了九牛二虎之力(请过大佬)

结论:

使用uniapp发现在切换页面的时候, 内存涨的很高且出现不回收的情况.

使用纯vue还是出现类似的问题.

使用纯html内存上下浮动正常(确认方案), 还是html+webview天生一对

解决问题

优化1

  1. 每次交易完成杀死webview,下次重开,让内存回收正常
  2. 还是使用uniapp, 因为项目东西很多
  3. 主页由安卓来编写,我们负责子页面
  4. 每次跳转页面的时候,调用安卓的方法来清理webview缓存
  5. 清理完缓存,页面的栈丢失了,导致不能正常返回
  6. 修改页面跳转方式为 uni.redirectTo(很麻烦)
  7. 确实解决了问题,不会发生崩溃.能做到100多笔. 发现还是回收的效率不高,做的交易越多,越来越慢,越来越卡

又发现问题

  1. 慢的问题随之出现.主页是安卓,每次杀死之后,下次初始化loadding的时间过长
  2. webview添加loadding
  3. uniapp添加loadding
  4. 加起来进入子页面最少3秒起步

优化2

  1. uniapp使用分包
  2. 代码压缩
  3. 包大小分析
  4. 拆包 发现是vue的包很大
  5. 开启gzip可以看我之前的文章

结论: 还是慢

后面还折腾了一段时间, 上周直接换 纯html 开发,目前很快. 开发效率确实不如以前, 但得到了教训. 安卓套壳选型时,建议html

针对不同的项目类型, 选型一定要谨慎.