得物客服一站式工作台的技术架构升级实践

1. POIZON 得物客服一站式工作台的技术架构升级实践分享人：毛远俊分享时间：2022/3/12

2. POIZON 个人简介曾就职于唯品会、蘑菇街和阿里巴巴，近11年的业务前端研发经验，目前主要负责得物客服前端中后台体系的建设

3. POIZON 目录 01 工作台复杂应用的兴起和瓦解 02 不同业务复杂模块的集成秒开 03 消息通信核心链路的性能优化 04 标准化与智能化带来的变革

4. POIZON 客服一站式工作台业务发展的三个阶段业务稳定如何降本增效业务快速发展业务核心链路遇到的性能瓶颈业务初始应用多，业务模块复杂

5. POIZON 工作台复杂应用的兴起和瓦解业务困境 – 工作台场景在线电话/热线工单辅助工具

6. POIZON 工作台复杂应用的兴起和瓦解业务困境 – 工作台场景一站式工作台场景下几大业务系统相互独立体验不一致操作效率低建立体验统一的一站式工作台模块重复多

7. POIZON 工作台复杂应用的兴起和瓦解业务困境 – 巨石应用研发效率低 SPA 业务耦合业务解耦发布成本高项目量级大独立发布回滚容错率低高可用的项目架构

8. POIZON 工作台复杂应用的兴起和瓦解业务困境 – 技术方案解决思路 SPA/MPA 随着业务的复杂性增加，页面量级也随之增加，开发效率和稳定性无法满足框架组件可以解决代码复用，但是组件不统一，体验比较差 iframe Module Federation 微前端复杂业务模块集成最快的方式，但是页面渲染慢，白屏时间长、体验比较差复杂业务模块功能抽象，远程组件加载，组件渲染快业务解耦，独立发布，研发效率高

9. POIZON 工作台复杂应用的兴起和瓦解业务困境 – 技术实现微前端 Module Federation 微前端：对工作台在线、热线、工单等复杂业务进行拆分和解耦，独立开发，独立部署 MF ：对工单详情、订单详情等复杂功能模块进行复用，减少页面渲染，提升客服体验

10. POIZON 工作台复杂应用的兴起和瓦解技术实现 - 什么是微前端源码应用A 编译&构建生产产物应用A + 应用B + 应用C 组合成一个新的应用系统应用B 应用C 微前端是一种类似微服务的架构，它将微服务的概念应用于浏览器端。多个团队通过独立发布功能的方式来共同构建web应用的技术手段。

11. POIZON 工作台复杂应用的兴起和瓦解技术实现 - 业务微前端架构图在线应用平台服务能力热线应用子应用远程组件工单应用辅助工具应用部署&构建 • JS沙箱隔离和CSS样式隔离 • 主应用和子应用数据通信灰度策略基座数据通信监控日志SDK … • MF远程组件的接入版本回滚 • 缓存（keep-alive）的实现底层乾坤 …

12. POIZON 工作台复杂应用的兴起和瓦解技术实现 - 带来的成效研发效率低业务逻辑解耦，测试联调互不影响，开发效率更高发布成本高各业务独立部署，互不影响，版本发布，出现问题秒级回滚回滚容错率低

13. POIZON 不同业务复杂模块的集成秒开什么是Module Federation Module Federation是模块联邦的意思，在webpack5中流行起来的，提供了能在当前应用中远程加载其他服务器上应用的能力。抽象封装复杂的页面远程组件（非NPM包） • A应用把复杂页面及其依赖打包成一个远程组件 • B应用按约定的地址异步import A应用中的远程组件 • A应用和B应用需要有远程组件共同的依赖配置

14. POIZON 不同业务复杂模块的集成秒开业务困境 – iframe缺陷&MF实现页面渲染耗时过长内存占用过高 MF远程组件的实现 iframe的实现

15. POIZON 不同业务复杂模块的集成秒开随着不断的打开工单详情iframe，重构前的性能曲线是不断的往上升的重构前性能曲线内存占用：最高500M降低到最高55M 再也没有内存泄漏问题反馈重构后性能曲线

16. POIZON 客服一站式工作台业务发展的三个阶段业务稳定如何降本增效业务快速发展业务核心链路遇到的性能瓶颈业务初始应用多，业务模块复杂

17. POIZON 消息通信核心链路的性能优化业务瓶颈 – 消息链路卡顿单播 • 会话量15W+，客服产能得不到最大化利用 • 前端和网关之间的通信由原来的单播改成广播形式多播 • 同时进线用户多了，消息发送和接收出现明显卡顿

18. POIZON 消息通信核心链路的性能优化业务瓶颈 – 开源消息通信框架的缺陷 for：会话状态处理 for：序列化/反序列化 for：打点数据解析 for：消息列表排序 for：消息列表去重 • 消息多重循环处理 • 单播改广播之后，消息处理耗时成倍增加 • 消息接收和发送卡顿 tinode消息通信框架

19. POIZON 消息通信核心链路的性能优化业务瓶颈 – 解决方案基于开源代码做二次开发开源tinode 对消息处理链路重写 Fork 源码可控

20. POIZON 消息通信核心链路的性能优化业务瓶颈 – 解决方案去重排序重构之后的架构图

21. POIZON 消息通信核心链路的性能优化业务瓶颈 – 带来的成效&收益平均首次响应时长和平均会话时长显著降低成效&收益客服同时接线10个用户毫无压力源码二次开发，消息核心链路完全可控

22. POIZON 客服一站式工作台业务发展的三个阶段业务稳定如何降本增效业务快速发展业务核心链路遇到的性能瓶颈业务初始应用多，业务模块复杂

23. POIZON 标准化与智能化带来的变革业务现状 – 分析思考 • 客服流失率高、培训成本高客服 • 客服服务质量因人而异，无法保证一致性 • 新老客服的解决率差距明显 • 取消订单、退换货、商品瑕疵… 流程 • 重复操作流程过多，效率低下… 降本：沉淀标准化流程，提供坐席辅助工具，降低客服培训成本增效：基于标准化流程提供智能推荐和智能关单，减少客服操作链路和工作时效

24. POIZON 标准化与智能化带来的变革业务现状 – 标准化流程沉淀取消订单问题场景定义取消订单流程配置取消订单SOP 退换货问题场景定义退换货流程配置退换货SOP

25. POIZON 标准化与智能化带来的变革业务现状 – 标准化流程配置与展示标准化流程可视化配置客服标准化流程操作

26. POIZON 标准化与智能化带来的变革复杂流程定义通用子流程编排子流程执行多轮流程

27. POIZON 标准化与智能化带来的变革业务 – 带来的变革沉淀标准化流程上百个，客服满意度显著提升变革工单类型智能推荐和关单自动化，客服人工成本显著降低拦截百万余用户转人工，解决率显著提升

28. POIZON 总结起始工作台复杂应用的兴起和瓦解微前端 + MF 不同业务复杂模块的集成秒开上升平稳 Fork源码 + 重写消息通信核心链路的性能优化降本增效 + 思考标准化与智能化带来的变革

29. POIZON 谢谢