Flutter动态化方案调研

一、Flutter.framework的大小

腾讯课堂14M
今日头条3M
闲鱼22M
百度贴吧13M
蚂蚁财富56.8M
百度网盘14M
手机淘宝15M
贝壳找房8M

二、动态化方案

1、Native模板

由粗粒度小组件动态拼装出页面，Native端已经有很多成熟的框架，如天猫的Tangram。

开发语言：iOS、Android
适用场景：快速迭代的活动营销页面
优点：无侵入，更新简单
缺点：提前预埋，扩展性差，灵活性差

2、Hybrid

以webview作为容器的app，历史悠久，最早到2011年。

开发语言：HTML
适用场景：双端严格一致的银行类app，容器类的支付宝小程序等
优点：动态更新，跨平台
缺点：性能，加载速度

3、RN/Weex

UI用Xml+JS表达，用Native View渲染。

开发语言：Xml+JS
适用场景：双端严格一致的银行类app，容器类的支付宝小程序等
优点：native组件，生态成熟
缺点：三方库crash，性能缺陷

4、Flutter

UI用Dart表达，用Dart engine渲染。

Flutter官方不支持动态化。原因是Flutter在 Release 模式下构建的是 AOT 编译产物，在 Debug 模式下构建的是 JIT ，AOT 依赖的 Dart VM 和 JIT 并不一样， JIT Release 并不支持 iOS 设备。可行的方案是：AOT 需要一个编译后的 “Dart VM”。抽离一份 DartVM 独立编译，再以动态库的形式引入项目。

开发语言：Dart
适用场景：iOS、Android、Web、Desktop、Embed
优点：性能最佳
缺点：增大包体积 20MB+

5、RN-like

大厂的主流方案。UI用JS表达，用Dart engine渲染。

开发语言：JS、类JS
适用场景：iOS、Android
优点：性能最佳
缺点：需要掌握JS、Dart两个语言和框架

6、Flutter+

大厂的主流方案。UI用Dart表达，用Dart engineX渲染。

开发语言：Dart
适用场景：iOS、Android
优点：性能最佳
缺点：需要改造Dart engine

三、大厂的Flutter动态化探索/实践

1、美团外卖Flutter动态化实践
2、携程App 首页动态化探索
3、Flutter 动态化在最右 App 中的实践
4、Flutter 动态化热更新的思考与实践
5、NOW直播Flutter动态搜索列表页实现
6、Flutter动态化的方案对比及最佳实现-闲鱼
7、基于JavaScript 的MXFlutter