解读京东批发云mPaaS中Flutter中热重载原理

本文要点：

一、前言

1.1 热重载是什么?

相熟JS的同窗，或许会五体投地，在N年前就曾经用上热重载了，然而对客户端开发人员来说，简直是福音。

那先来看下Flutter官方的定义：

便捷来说，就是经过将修正后的源代码文件注入到正在运转的 Dart 虚构机来成功，注入之后， Flutter 会智能从新构建 widget 树。

1.2 为什么须要热重载?

程序猿在刀耕火种的时代，开发调试是这样子的：

当名目不大，人数不多的状况下，画面是十分谐和的，效率也是无须置疑的高效。但事实是，在大公司，名目往往很大，编译巨慢无比，同时开发人员泛滥，有着十分严厉的流程制度，造成看起来本没有疑问的开发调试流程，变得意外的痛苦，降落了集体的效率，这里强调下，指的是集体的效率，团体以为越是完善的流程体系，对集体的解放往往越强，但从团队的角度去看待效率，必定是能1+ 1 大于 2 的。

而此时的心境是这样子的：

而有了热重载，开发调试是这样子的：

心境也就成这样子的：

1.3 抛出疑问

从热重载定义来看，不少人脑子里蹦出不少跟我一样的纳闷：

同时在日经常常使用热重载的环节中，也会碰到不少这样那样的纳闷：

当你在网上看过少量热重载文章后，又衍生了额外的疑问：

不急，本文会对上述不懂启动逐一解答。

二、dart的热重载

由于Flutter驳回dart作为开发言语，咱们先从dart角度来验证下热重载。

2.1 编写验证demo

思考到dart口头完会封锁当行进程，咱们写了个定时器来保障进程存活，同时能看到热重载效果。

2.2 开启VMService

终端下口头 dart --enable-vm-service main.dart，其中的main.dart为2.1中代码文件：

可以看到终端会始终输入"Hello JDFlutter"的字符。

2.3 口头热重载

咱们将main.dart文件中打印日志修正为”Hello JD”，同时关上终端输入的Observatory链接地址，如下：

找到咱们main.dart的Isolate(读者可以便捷了解为是dart中的线程，只不过Isolate没有共享内存)，图中红圈部分，进入后找到ReloadSource：

点击Reload Source后，终端开局输入”Hello JD”的字符，成功了一次性热重载环节，如下图：

2.4 智能化热重载

还是以上方为例子基础例子，咱们参与文件监听，并且经过发送信息给vm_service来成功热重载，代码如下：

间接运转 dart --enable-vm-service main.dart，时期修正”Hello JDFlutter”为”HelloJD”，运转结果如下：

可以看出，咱们成功成功了智能化热重载，上述代码跟Dart虚构机通讯步骤如下：

2.5 Dart虚构机可做的事情

到这里，大家可以放飞自我，Dart Service提供了少量对外协定，蕴含断点、失掉虚构机形态，性能等协定，可以参考：Dart虚构机服务接口。

三、Flutter的热重载

Flutter的热重载，实质是在封装dart热重载并且对不同的设施启动装置加载等流程，接上去预备好在Flutter源码环球里飞翔吧，以下剖析基于v1.22.5分支的源码。

俗话说，工欲善其事必先利其器，在源码飞翔久了，容易迷茫，找不到东西南北，看到关键方法，又不知道是不是代码实在的case，须要能验证咱们的想法，最便捷的方法打断点，有针对性的去看源码。

3.1 IDE断点

Flutter源码的下载也很便捷，这里就不赘述了，大家可以上网搜下。Flutter工具链的源码位于packages/flutter_tools下。

本文是经过Android Studio(比拟熟)来性能和检查源码，性能如下：

一顿性能上去，就可以用工具链完美的debug指定Flutter工程的源码，接上去就是选好设施，点击debug按钮，如下图：

3.2 全体流程

以下是Flutter热重载流程图：

简述为：

整个环节并没有让App重启，从而到达高效开发调试效果。

3.3 源码剖析

3.3.1 run命令流程

咱们从flutterrun命令为入口剖析，类位于packages/flutter_tools/lib/executable.dart中的main()方法，run命令最终成功类位于packages/flutter_tools/lib/src/commands/run.dart。

RunCommand在结构函数中自动开启了hot标识，假设须要封锁，要新增入参--no-hot。

从run命令的流程，可以看出，关键是做了自动参数设置，参数校验，flutter设施初始，形式判别等，热重载是从HotRunner.run中开局口头。

3.3.2 热重载流程-初次启动

在HotRunner中，流程也并不复杂：

可以看出，HotRunner做了三件事：

第二步会触及到不同平台不同做法，对iOS和Android来说，区分对应xcrun和adb，不是本文重点，流程也比拟长，无时机再开展讲，重点说第一步和第三步。

编译生成dill文件

最终调用到_compile方法，代码太过于繁琐，咱们间接断点看，如下：

从断点信息可以获知，dart文件会被转为kernel文件app.dill，以下截取部分app.dill内容，可以看出app.dill是一份完整的代码文件，蕴含了main.dart的内容，左边为main.dart源文件，左边为app.dill文件内容：

生成的app.dill是一份全量的代码，接上去编译不同设施(Android、iOS)的装置包，同时运转指定的包。

此时生成app.dill的进程，咱们暂且称为“编译进程”，后续热重载增量的dill，也是驱动该进程生成。

attach设施

在上述的第二步，设施在启动运转App时，会关上App中DartVM的Observatory服务，实质是一个websocket服务，依照自定义的jsonrpc2.0协定启动通讯，在attach时，会经过URI衔接上设施服务，如下图：

连上DartVM服务后，会注册几个热重载事情：reloadSources，reloadMethod，hotRestart，这几个事情并不是注册到App中的Dart虚构机，而是提供应fluttertool其余命令经常使用，如下图：

同时经过DartVM服务，来初始设施中flutter产物，设施中产物门路是暂时生成，用XXX替代，产物门路为：

详细代码如下：

3.3.3 触发热重载

上方区分从源码角度，看看究竟做了什么?

开发者在口头flutter run或许flutter attach后，在终端中输入r，即可体验到重载效果，假设在AndroidStudio和VSCode中，间接Ctrl+S或许Cmd+S即可。

对应到源码入口：

不论是HotReload还是HotRestart，最终都是调用HotRunner.restart方法，一路跟进，最终会到某个详细设施update方法，并再次调用上述《热重载流程-初次启动》中的_compile方法，通知编译进程生成增量的dill文件app.dill.incremental.dill。那这个增量文件究竟是什么呢?demo中修正字符串"FlutterDemo Home Page"为"Flutter Demo Home Page2"，来看看dill文件内容：

第一张图为修正前，第二种为修正后，第三张为增量的dill内容。可以看出增量的dill文件仅蕴含改动的dart文件代码。

生成增量的dill后，会经过_DevFSHttpWriter写入设施，如下图：

当同步完增量文件，最后还须要通知DartVM去刷新UI界面，这个步骤就跟咱们上述的2.4节内容相似：

vmService.reloadSources最终调用了_call方法，这是一个dart官方库，如下：

HotRestart与HotReload区别

Flutter官方提供两种加快调试方法，一种是HotReload，另一种是HotRestart。前者无感知部分刷新，体验最好，然而缺陷也很显著，实用比拟局限，可以参考官方给出样例：HotReload，关键有这几种场景不实用：

而在HotRestart流程中，相比HotReload流程，参与了肃清资源操作，同时不再生成增量的dill文件，每次改动都是生成全量的app.dill文件，该细节就不开展，感兴味读者可以debug源码看。

上述可以看出HotRestart额外处置了一些事情，包括杀掉非UI的isolate，重置UI的isolate等。

关于dill文件同步到设施中位置，不同设施不一样：

至此，热重载源码就告一段落，很多奇技淫巧并不能逐一展现，值得大家入手去看看。

四、总结

经过上述一顿探求，文章最早提出的几个不懂，想必都有了答案。这里只是引见了Flutter源码的冰山一角，更多源码还须要继续探求，经过浏览源码，可做的事情很多：

总之，可做的事情很多，那咱们看源码的意义就十清楚晰：

五、参考资料