美团外卖基于 Flutter Web 的多端一体化架构实践

1. 基于 FlutterWeb 的多端一体化架构实践李典胜 2019.04 加入美团外卖，先后主导了几次美团外卖商家前端技术栈升级，并推动了基于 FlutterWeb 的多端一体化建设。

2. • Content Title 1

3. 1 背景 2 面临的挑战 3 MTFlutterWeb 一体化 4 总结与展望

4. 业务形态多元化 a. 商家重度使用 PC b. 具有外投 H5 场景 c. 多端业务功能对齐

5. MTFlutter 技术支撑 MTFlutter 是美团外卖商家端维护的 Flutter 企业级解决方案 MTFlutter 在美团外卖商家端 APP 中的业务覆盖度达 90%+

6. FlutterWeb 官方的支持 2017 年 2018 年 2019 年 2021.03 Flutter 开源 FlutterWeb Beta 发布 FlutterWeb 合入 main repo Flutter2.0 稳定 Web 支持一套代码多端运行

7. FlutterWeb 官方的支持 Flutter Native Flutter Web（HTML Render）渲染：利用 DOM、Canvas、JS 等，在 Engine 层对齐了渲染能力逻辑：早已成型的 dart2js 可将 Dart 逻辑完美转换为 JS 站在巨人的肩膀上，可靠！

8. 团队背景 a. TypeScript 转型 Dart，学习成本可接受 b. 大前端融合，FE 承担了许多 Flutter 业务 c. 具备 Flutter 开发能力的同学达 95%+

9. 1 背景 2 面临的挑战 3 MTFlutterWeb 一体化 4 总结与展望

10. 面临的挑战 1 基建缺失基础依赖未扩展 Web 需对接 Web 公共服务 3 PC 适配难度大涉及多方的适配规范适配效率与交互体验 2 性能差页面加载性能差滚动存在卡顿问题

11. 1 背景 2 面临的挑战 3 MTFlutterWeb 一体化 4 总结与展望

12. 整体架构 a. 公共服务对接 b. 基础依赖建设 c. 性能优化 d. PC 适配

13. 基础依赖建设利用 Flutter Plugin 的 Web 扩展能力，实现请求、埋点、路由等基础依赖建设借助 dart:html、package:js，可调用 Web 中的 API 三端底层实现，上层无感知

14. 案例：埋点库实现埋点库特征：已有现成的 JSSDK，在常规 Web 中是直接被引入并调用 Flutter Plugin 中如何调用 JSSDK？

15. 案例：埋点库实现 ① 定义声明 ② 公共基类

16. 案例：埋点库实现 ③ Web Plugin 实现 ④ pubspec.yaml

17. 加载性能优化 Why Not CanvasKit ? a. CanvasKit 模式输出包体积过大（> 2.5M） b. 自定义字体、emoji 等存在渲染问题 c. 建议 CanvasKit 模式用于桌面应用 d. CanvasKit 模式的优化难度大因此选用 HTML Render 模式

18. 存在的问题 SDK 输出的 JS 包就达到 1.1M a. SDK JS 体积大（> 1.1M） b. 未支持文件 HASH c. 缺少资源 CDN 化

19. 路由懒加载减少首包大小体积，提升首屏加载性能，提高缓存命中率

20. 静态资源优化干预编译流程，对产物二次处理，如：文件 HASH、文件分片、CDN 化等

21. 静态资源优化 flutter_tools/lib/src/build_system/targets/web.dart JS 文件分片：等分 N 个文件，前端并行请求 N 个文件，充分享受浏览器并发请求能力，提升加载性能。

22. 滚动性能优化大量的 Canvas 从何而来？

23. Canvas从何而来？ engine/bitmap_canvas.dart color、shadow、border、 image 等都使用了 Canvas 渲染，造成了资源的浪费优化 Canvas 的创建是关键！

24. 滚动性能优化方案 a. 基础样式或元素，使用 HTML DOM 替代 Canvas b. 设置阈值，增加兜底处理，避免极端情况下引起内存问题

25. 滚动性能优化方案

26. PC 适配实践背景：实现 PC 复用，提效最大化挑战：保证双端交互习惯的同时，低成本实现 PC 适配双端交互习惯的差异

27. PC 适配方案设计 a. 适配规范制定 b. 开发系列适配工具，包括现有 PC 组件融合工具 c. 分平台打包，减少包体积

28. PC 适配规范 1 屏宽伸缩或加列 2 保证各端交互习惯 3 保留各端独有功能 • 列表模块 • 下拉框 • 顶部导航 • 表单模块 • 时间选择 • 面包屑 • Banner • 下拉刷新 • 三方分享 • 金刚资源位 • 滑动操作 • 报表下载直接的收益：交互、 UI 无需介入 PC 的设计工作

29. 融合现有 PC 组件背景：融合成型的 PC 组件库，提高适配效率的同时，也能保证交互习惯挑战：Flutter 中如何能实现任意位置的插入并调用 Web 组件呢? ① 现有 Web 组件定义 Dart 侧的调用声明 ② 任意位置创建 Flutter Widget 设定样式属性 ③ 装载 Web 组件绑定 Widget 与装载器引入 dart:html 创建装载器渲染 Web 组件

30. 案例：调用 React 分页组件 ① 定义声明

31. 案例：调用 React 分页组件 ② 创建装载器 ④ 调用 Web 组件 ③ Widget 与装载器绑定

32. 分平台打包背景：PC 适配产生了冗余代码，且是无法被 TreeShaking 剔除的

33. 分平台打包解决方案 a. 对编译进行干预，解析 AST 节点并改写，剔除平台冗余代码 b. 输出 PC、H5 双端资源并进行隔离

34. 案例：responsiveSystem 剔除无用代码 flutter_tools/lib/src/commands/build_web.dart flutter build web --type pc

35. 成果与收益页面完全加载时间提升 50%，目前维持在 600ms（TP50） 2 三端复用人效提升明显，交互、 UI设计效率提升近 50%，RD 开发效率提升 60% 大部分场景下滚动 FPS 可达到 45~60FPS

36. 1 背景 2 面临的挑战 3 MTFlutterWeb 一体化 4 总结与展望

37. 总结与展望总结： • 公共服务对接，基础设施搭建，使得业务能够快速接入 • 优化编译流程、定制 SDK，提升加载性能与滚动性能 • PC 适配规范和工具，提升产研整体效率未来规划： • 深度的性能优 • 赋能 Native，探索更多可能性

38.

39. 美团外卖基于_Flutter_Web_的多端一体化架构实践扫描二维码提交议题反馈