热重载工具的启动流程

研究热重载的价值：更方便对产品进行热更新，Dart代码编写完成Flutter.framework会以亚秒级别的速度进行更新渲染。

热重载原理中已经实现了热重载挂载，下面我们跟踪flutter_tools源码来探索热重载的流程

• flutter_tools工程选择模拟器进行调试

指定模拟器

• flutter_tools文件添加断点进行调试，查看args参数内容

断点调试

args参数就是上面Program arguments中配置的

• main函数中对参数做分析，其中有一个非常重要的函数run

分析args参数

• 查看run方法以及参数，run方法是一个异步方法

run方法参数 run方法查看

• run方法执行完成，开始执行下一个方法runCommand

runCommand方法 设备信息

runCommand方法主要是参数的配置，模拟器、真机等设备的匹配就是在这个方法中。

• runCommand方法中有一个重要方法setupTerminal，启动我们的终端

启动终端

• 查看Running Xcode build...在什么时候打印？

查看控制台打印 mac.dart文件

buildCommands传入_runBuildWithRetries方法；flutter_tools服务端会调起一些指令传递给Xcode。

• 在源码中查找控制台打印内容，控制台所有的打印都在setupTerminal方法中

image.png image.png

• 启动虚拟机

启动虚拟机 虚拟机启动完毕

• Debugger工具

Debugger调试工具 Debugger调试页面

Flutter工程启动完成会打开虚拟机、Debugger调试工具（用于监听项目）。

热重载底层找到增量文件

setupTerminal方法中最重要的就是监听listen，接收命令在_commonTerminalInputHandler中处理

setupTerminal方法中监听 处理命令

• 处理r命令中调用restart进行热重载，restart方法便是热重载核心入口

处理r命令 image.png

断点调试最终执行到run_hot.dart文件中的restart方法内。

• restart方法内查看与热重载相关的方法

image.png image.png

• 点击进入查看_hotReloadHelper回调

image.png

• 查看_reloadSources源码实现

VM虚拟机 记录渲染时间 增量更新

• 查看_updateDevFS增量更新方法源码

image.png image.png

做增量渲染的代码在content.file文件中，即手机文件中；至此我们就找到了增量文件。

注意：增量渲染是以文件为单位，Dart文件中如果修改注释，也会作为更改文件进行重新渲染。

增量文件传输

上面Dart服务端已经能够获取增量文件了，那么Dart Sever端是如何把增量文件传递给Dart虚拟机的？

Dart虚拟机与Dart Serve端并不在一个地方

• Dart Serve端把增量文件传递给Dart虚拟机

image.png

• vmservice.dart文件的setUpVmService方法用来开启虚拟机

开启虚拟机

刚创建Dart Serve端的时候也会把虚拟机也打开。

• 注册虚拟机

image.png

执行hot_reload的时候就会调用Callback回调。

• Dart虚拟机与Dart Serve端走的是RPC通信，即点对点的传输协议底层是Socket协议

image.png

热重载和引擎的联调

之前我们配置Runner项目与自定义引擎源码进行了关联，下面我们配置flutter_tools与自定义引擎源码进行关联？

配置Configurations 类似Runner工程配置FLUTTER_ENGINE与LOCAL_ENGINE

• Program arguments配置完成之后，直接运行flutter_tools工程

image.png

• 下面使用Xcode附加工程，使用Xcode调试

image.png Xcode附加成功

• 打开flutter_engine工程

flutter_engine工程

• 进行断点调试

截屏2022-01-01 下午4.03.49.png

FlutterDart端、引擎端以及Dart Servc端进行了关联。

热重载渲染流程

热重载流程图

1. 标注橙色的Dart代码发生修改；
2. Dart Sever服务端会去读取Dart代码，查看哪些代码发生了更改；以Dart文件为单位；
3. Dart Sever服务端通过RPC协议会把更改的Dart代码给到Dart虚拟机，虚拟机在启动的时候就会加载，然后监听回调；
4. Dart虚拟机也是通过RPC协议最终把更改的Dart代码给到Flutter.framework渲染引擎执行Reload进行重新渲染。