Flutter 热重载功能:优点和性能说明

已发表: 2023-09-14

Flutter 热重载是 Google 框架中一项备受追捧的功能,它允许开发人员进行代码更改并几乎立即看到结果,而无需重新启动应用程序。 此功能有助于快速迭代和完善应用程序的设计、尝试不同的 UI 布局和配置、修复错误,最重要的是,显着缩短开发时间。 因此,热重载可以让 Flutter 应用程序开发公司受益匪浅,因为它允许实时代码更改和即时更新,使开发过程更加高效和协作。

Flutter 热重载功能使开发人员能够立即看到他们对代码所做的更改反映在模拟器或设备上,而无需重新启动整个应用程序。 本文旨在回答一个看似简单的问题:“几乎即时”对于热重载意味着什么? 换句话说,这个 Flutter 功能在不同规模的项目中运行速度有多快? 在从事大型项目时应该期待什么,而小型项目又如何呢? 热重载在所有这些场景中都能正常工作吗? 让我们来看看吧!

了解 Flutter 热重载

让我们从基础知识和必要的免责声明开始。 在描述热重载功能时,需要强调的是,Dart VM 使用 JIT(即时)编译器将代码转换为本机机器代码,这发生在程序执行之前。 JIT 基于代码预测,因为它可以访问动态运行时信息,从而带来节省时间的解决方案,例如通知开发人员某个特定函数未在任何地方使用。

热重载会重建小部件树,但保持应用程序状态不变。 使用热重载功能时,不会调用函数“main()”和“initState()”。 如果需要重建这些功能,则应使用热重启或完全重启:

  • 热重启:触发项目应用程序源代码重新编译的工具,从默认/初始状态开始,其中保留的状态被破坏。 该工具比完全重启快得多,但比热重载花费更多时间。
  • 完全重启:从头开始构建应用程序项目的工具,也称为“冷启动”。

此外,开发人员有时必须使用热重启而不是热重载,例如:

  • 如果应用程序在后台停留太长时间和/或要被杀死,
  • 如果将 Dart 文件中的枚举类型更改为普通类,反之亦然,
  • 如果本机代码更改,
  • 更改泛型类型声明后。

Flutter Hot Reload 只能在 debug 模式下进行。 其他构建模式,即:配置文件模式和发布模式,不支持热重载功能。

项目规模 vs Flutter 热重载性能

Flutter 项目的大小各不相同,具体取决于所包含的库的数量、应用程序架构、媒体文件或应用程序功能。 直到最近,Flutter 还被认为是 MVP 和 PoC 的完美解决方案。 然而,随着 Google Pay、eBay、Nubank、Rive 或拥有 4700 万用户的 Maya Bank 等大型 Flutter 项目势头强劲,探索复杂应用程序的 Flutter 可能性也至关重要。

Flutter 的热重载功能可用于概念验证 (PoC) 应用程序和企业级数字产品。 然而,问题仍然是它的性能对于复杂的项目是否令人满意以及企业应用程序的 Flutter 是否是一个可行的选择。 让我们进一步探讨一下!

热重载性能实验

首先,为了确定热重载在不同用例中的近似平均性能,我决定检查 5 个包含特定数量库的测试项目:

  • 测试项目1:1000个库
  • 测试项目2:5000个库
  • 测试项目3:10 000个库
  • 测试项目 4:25 000 个库
  • 测试项目5:50 000个库

我知道一个项目不太可能拥有如此大量的库,但我们正在使用它作为测试来跟踪五个特定项目的趋势。

已使用以下设备规格进行了实验:

  • MacBook Pro,2-3GHz 四代码英特尔酷睿 i5,16 GB 2133 MHz LPDDR3,英特尔 Iris Plus 显卡 655 1536 MB,
  • Visual Studio 代码,版本:1.68.1,
  • 模拟器:Iphone 12 Pro Max – iOS 15.5(Xcode 版本:13.4.1),
  • Flutter SDK(通道稳定,3.7.0)。

请记住,具体的重新加载时间将根据您的硬件或系统而有所不同。 已使用以下设备规格进行了实验。 然而,总体趋势和结论应该保持不变。

该实验的目的是展示在每个项目中执行热重载功能需要多长时间,其中生成了相关数量的库用于测试目的。 每个库都包含一个特定的类。 这样,库的数量就对应于预期重新加载的类的数量。下面是包含 10 000 个类的测试项目 3 的示例。 每个名为“placeholderX”.dart 的库都包含一个简单的无状态 Widge 类“placeholderX”,它是一个容器:

Flutter 热重载测试示例

容器的颜色是“Constants”类中“constants.dart”库中声明的变量,它简单地连接到以下为测试“占位符”库而生成的变量。

热重载颤振测试

Flutter 热重载测试结果

现在我们已经确定了实验的所有变量和目标并解释了过程,现在是总结结果的时候了。 我们来看看5次Flutter Hot Reload性能测试的效果。

测试 1:重新加载 1000 个类

Flutter 热重载性能测试:1,000 个样本
包含 1,000 个类的测试 1 显示热重载功能的平均时间为
0.86804 秒。

测试 2:重新加载 5,000 个类

Flutter热重载性能测试:5000个样本
具有 5,000 个类的测试 2 显示热重载功能的平均时间为 4.45132 秒

测试 3:重新加载 10,000 个类

Flutter热重载性能测试:10,000个样本
具有 10,000 个类的测试 3 显示热重载功能的平均时间为
7.538 秒。

测试 4:重新加载 25,000 个类

Flutter 热重载性能测试:25,000 个样本
具有 25,000 个类的测试 4 显示热重载功能的平均时间为
25.6295 秒。

测试 5:重新加载 50,000 个类

Flutter热重载性能测试:50,000个样本
具有 50,000 个类的测试 5 显示热重载功能的平均时间为
139.676 秒。
测试 1:1,000 类测试 2:5,000 类测试 3:10,000 类测试 4:25,000 类测试 5:50,000 类
50 次重建期间热重载的平均时间0.86804秒4.45132秒7.538秒25.6295 秒139.676

下图比较了不同项目规模之间的热重载持续时间:

Flutter热重载的平均时长

显然,由于库(类)数量较多,特定项目规模的热重载功能的平均时间正在增加。

然而,仔细观察下面的图表并仅考虑前 3 个项目测试,您可能会注意到热重载特定用法的详细值:

Flutter热重载的平均时长

测试结果解释

测试结果证实,Hot Reload Flutter 功能在一次重建 1,000 个类时是有效的,平均持续时间在 1 秒的限度内波动,大多数情况下甚至没有达到图表中的这个值。 因此,在大多数现实生活中,热重载当然是一个安全的选择,例如:

  • 重新加载单个类,
  • 与客户进行现场会议(例如测试新想法时),
  • 在结对编程或头脑风暴期间。

在我下结论之前,我想强调一件事。 请记住,我在测试中立即重新加载了所有列出的库(类)。 在一般的开发过程中,几乎不需要重新加载如此数量的库。

根据我的开发人员经验(以及测试结果),重新加载更少的库应该可以让您避免延迟问题。 更不用说频繁地重新加载库可以最大限度地减少不必要的错误或代码问题的风险,并使监控项目中引入的更改变得更加容易。

Flutter 热重载:性能解释

Flutter 热重载功能是一个强大、高效的工具,在开发阶段解决 UI 相关问题时可以派上用场。 正如上面的实验所证明的,在大多数情况下,热重载性能是无缝的 - 单个 UI 更改只需不到一秒,重新加载 1,000 个类的平均时间在短短 1 秒左右波动。

而且,实验证明Flutter可以重加载数千个类的大型企业级项目,平均Hot Reload时间小于8秒。 尽管热重载性能在大型项目(50000类场景)中可能并不完全令人满意,但 Flutter 完全能够应对它们。

毫无疑问,Flutter Hot Reload 通过在项目的 widget 树中重建 widget 来提高工作效率,让您更容易在眨眼之间达到理想的结果。 借助热重载,Flutter 开发人员能够及时处理复杂的设计更改(甚至是影响整个应用程序的设计更改)。

最后但并非最不重要的一点是,热重载只是影响整个框架性能的因素之一(不断得到 Flutter 社区的验证并得到 Flutter Dev 的改进)。 探索顶级 Flutter 开发工具对于高效创建高质量的跨平台移动应用程序至关重要。 因此,我强烈鼓励您通过实验和测试以及商业客户端项目来探索 Flutter 的性能。 这就是我们在 Miquido 所做的事情——稳步发展我们的 PoC 和企业级跨平台应用程序开发项目组合。