FlutterWeb性能优化探索与实践

 美团外卖商家端基于 FlutterWeb 的技术探索已久，目前在多个业务中落地了App、PC、H5的多端复用，有效提升了产研的整体效率。在这过程中，性能问题是我们面临的最大挑战，本文结合实际业务场景进行思考，介绍美团外卖商家端在 FlutterWeb 性能优化上所进行的探索和实践，希望对大家能有所帮助或启发。

• 一、背景
  • 1.1 关于FlutterWeb
  • 1.2 业务现状
• 二、挑战
• 三、整体设计
• 四、设计与实践
  • 4.1 精简 SDK
  • 4.2 JS 分片
  • 4.3 预加载方案
  • 4.4 分平台打包
  • 4.5 图标字体精简
• 五、总结与展望

一、背景

1.1 关于FlutterWeb

时间回拨到 2018 年，Google 首次公开 FlutterWeb Beta 版，表露出要实现一份代码、多端运行的愿景。经过无数工程师两年多的努力，在今年年初（2021 年 3 月份），Flutter 2.0 正式对外发布，它将 FlutterWeb 功能并入了 Stable Channel，意味着 Google 更加坚定了多端复用的决心。

图1 FlutterWeb历史当然 Google 的“野心”不是没有底气的，主要体现在它强大的跨端能力上，我们看一下 Flutter 的跨端能力在 Web 侧是如何体现的