iOS 集成 Flutter Module 和加载 Flutter 页面

一、iOS 集成 Flutter Module

此处使用的是 CocoaPod 集成 Flutter Module 的方案

前提条件：

1. 本地配置了 Flutter 和 Dart 的开发环境
2. 安装了 CocoaPod

优点

1. 集成简单快捷，
2. 方便 Flutter 项目与 iOS 项目的联调(更改完 Flutter 项目之后直接重新运行 Xcode 即可看到效果 )

集成步骤

# Flutter
flutter_application_path = './flutter_module_test/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'IntegrateFlutter' do
   use_frameworks!
 
   # Flutter
   install_all_flutter_pods(flutter_application_path)

end

1. 在主项目根目录下创建 Podfile 文件，并将下面的 CocoaPod 配置复制到 Podfile 中。
2. 将flutter_application_path改成自己的 Flutter Module 的路径
3. 将IntegrateFlutter 改成自己的 iOS 项目的 Target
4. 运行 pod install命令拉取依赖和编译集成 flutter module 项目

此时 flutter module 项目编译后的产物已经被集成到 iOS 项目中，下面就是开始使用 flutter 中的功能。

二、 加载 Flutter 页面的一点研究

iOS 原生页面弹出 Flutter 页面，以及弹出页面体验性能优化

在 ViewController 弹出 Flutter 页面卡顿的原因：

    /// 弹出 Flutter 页面
    @objc func presentFlutterAction() {
        testPerformance(name: "present flutter page") {
            // 在弹出页面的时候才开始创建执行 FlutterEngine 造成页面卡顿
            let engine = FlutterEngine(name: "flutter engine", project: nil)
            engine.run(withEntrypoint: "main")
            GeneratedPluginRegistrant.register(with: engine)
            let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
            present(flutterVC, animated: true, completion: nil)
        }
    }

    /// 弹出 Native 页面
    @objc func presentNative() {
        testPerformance(name: "present 原生页面耗时") {
            let view = UIViewController()
            view.view.backgroundColor = .blue
            present(view, animated: true, completion: nil)
        }
    }

    /// 耗时测试
    func testPerformance(name: String, action: () -> Void) {
        let begin = Date.timestamp
        action()
        let end = Date.timestamp
        print("\(name):\(end - begin)ms")
    }

上面的弹出 flutter 页面时才开始创建执行 FlutterEngine，此过过程太过耗时会造成页面的卡顿。从下面的加载 Flutter 页面和加载原生页面的耗时来看加载 flutter 页面耗时还是挺多的，用户可以明显的感觉到卡顿

present flutter page:43ms
present flutter page:20ms
present flutter page:24ms
present flutter page:21ms
present flutter page:23ms

present 原生页面耗时:1ms
present 原生页面耗时:1ms
present 原生页面耗时:1ms
present 原生页面耗时:1ms

优化：将 FlutterEngine 提前创建好并运行

    // 懒加载创建 FlutterEngine
    lazy var engine: FlutterEngine = FlutterEngine(name: "flutter engine")

    override func viewDidLoad() {
        super.viewDidLoad()
        // 运行 Engine
        engine.run(withEntrypoint: "main")
        GeneratedPluginRegistrant.register(with: engine)
    }

    /// 弹出 Flutter 页面
    @objc func presentFlutterAction() {
        testPerformance(name: "present flutter page") {
            // 弹出 Flutter 页面
            let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
            present(flutterVC, animated: true, completion: nil)
        }
    }

从下面的耗时测试中也可以看出时间弹出 Flutter 页面的时间大大的缩短，用也察觉不到弹出页面时的卡顿

present flutter page:6ms
present flutter page:2ms
present flutter page:2ms
present flutter page:2ms

present 原生页面耗时:1ms
present 原生页面耗时:1ms
present 原生页面耗时:1ms
present 原生页面耗时:1ms

缺点：提前创建 FlutterEngine 造成内存暴增，居高不下。而用户后面可能不会跳转到 Flutter 实现的页面，这就会造成内存的浪费。