Flutter Hot Reload
Article Summary
Jens Johansen from Google's Dart team reveals how they made Flutter's hot reload 30% faster. The optimization saves Flutter developers collectively over a year of waiting time every 5 days.
Hot reload is Flutter's signature feature that lets developers see code changes instantly on device. In Flutter 2.2, the team reimagined how the compiler handles file changes during hot reload, focusing on distinguishing between global changes that affect multiple files versus local changes confined to a single file.
Key Takeaways
- Hot reload now 30% faster by recompiling only changed files when possible
- Compiler ignores comments and function bodies when checking for global changes
- Large apps see dramatic improvements: 400ms compilation drops to 40ms
- Small apps benefit less but still gain from comment-only changes
- Technique doesn't help with method additions or field initializer changes
By intelligently detecting which code changes are truly global versus local, Flutter 2.2 reduced hot reload times by 30% on average, with some large apps seeing 10x faster recompilation.
About This Article
Hot reload's five-step process involved file scanning, recompilation, file transfer, VM reload, and reassembly. The problem was that recompilation would unnecessarily rebuild transitive importers and exporters even when changes were local rather than global. This took 67-386ms depending on whether you were working with small or large applications.
Jens Johansen's team added file comparison logic that ignores comments and function bodies when detecting changes. This lets the compiler recompile only the modified file when it confirms the change is local, not global.
The Veggie Seasons sample improved by 30% overall. Compilation dropped from 100ms to under 20ms. Flutter Gallery saw nearly 50% faster reload times, with recompilation falling from 400ms to 40ms on non-global changes.