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

所属专题：Flutter技术探索与实践

嘉宾 : 李典胜 | 美团技术专家

会议室 : 一层 5号厅 A+B

讲师介绍

专题演讲嘉宾：李典胜

美团技术专家

李典胜，专注于前端开发领域7年，曾就职于360，于2019年加入美团外卖，现主要负责外卖商家自运营业务，致力于商家业务多端复用的探索，对 RN、Flutter 等跨平台技术方案有较深刻的理解。在美团外卖的两年多时间，推进了外卖商家的技术栈统一，同时攻克了多项技术难题，完成 Flutter Web 基础设施的建设，推动了 Flutter Web 在外卖商家业务的多次落地，是美团 Flutter Web 较早的实践者。

议题介绍

地点：一层 5号厅 A+B

所属专题：Flutter技术探索与实践

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

美团外卖商家端业务主要形态有 PC 和 App，且有外投 H5 场景。在这样多元的业务形态场景下，多端体验一致性和迭代效率一直都是值得被探索的方向，尤其对 Web（PC&H5）端的延伸，业界的实践较少。基于团队对 Flutter 技术的良好“储备”和 Flutter 自身优秀的跨平台特性，我们利用 Flutter Web 很好的实现了多端复用和一致性体验，本次演讲主要分享相关经验，同时结合实例，帮助大家快速了解 MTFlutterWeb 的能力，也希望能为大家提供借鉴思路。

演讲提纲：

1. 背景介绍

业务背景
- 业务形态（APP/PC/H5）多元化
- 业务在各端的一致性需求
- 业务案例介绍
技术背景
- MTFlutter 技术“储备”
  - MTFlutter（美团内部 Flutter 开发生态）架构介绍
  - 团队技术栈现状及FE扮演的角色
- FlutterWeb 官方现状
  - FlutterWeb 架构介绍
  - 交互与视觉体验一致性

2. 面临的挑战

工程化
- 现有基础依赖（请求库、埋点等）缺乏对 web 侧的实现
- Flutter Web 编译产物不足以满足投产要求
- 无法利用现有的持续交付与部署工具
性能问题
- Flutter Web 页面加载性能差
- 滚动性能无法满足复杂业务场景
PC侧复用
- 交互的差异与适配

3. MTFlutterWeb 解决方案

MTFlutterWeb 技术架构
工程化建设
- 基础依赖建设（请求库、埋点、监控等）
- 持续交付与部署
性能优化
- 页面加载性能
  - JS 拆包与按需加载
  - 静态资源 Hash 化
  - 静态资源 CDN 化
- 滚动性能
  - Flutter Web 页面滚动原理
  - 改进与优化
多端复用
- PC 侧复用实践（UI与逻辑）
成果展示
- 全平台效果展示
- 性能指标数据展示