Building JavaScript bundles for React Native
summary
Metro is the JavaScript bundler used by React Native and it aims for sub-second reloads by combining layered caches (including an HTTP remote cache used at Facebook), parallel transforms via worker processes, and a delta algorithm that sends only changed modules (default on Android). Bundles use numeric module IDs, a small runtime that requires module 0 to start, and two serializers for code and sourcemaps. For production Metro supports RAM bundles with lazy native injection and the inline requires transform to enable lazy parsing and eliminate unused modules.
AI-written summary · about
chapters (9)
- 0:00Introduction to Metro
- 1:09Why Metro for React Native
- 7:26How Metro builds bundles
- 11:57Speeding up transformations
- 14:26Delta bundler for fast reloads
- 16:33Serializing the dependency graph
- 17:37RAM bundles for React Native
- 20:51Inline requires and code elimination
- 22:15Key takeaways and resources
related talks
26mMetro and React Native DevX in 2023
25mMetro: Scaling JavaScript Build Systems
28mThe Dark Art of Bundlers
37mMicro Frontends for Mobile
34mChanging React Native... from within!
21mJavaScript, React Native and Performance
34mMonorepo: React Web & React Native
50mBuilding Cross Platform Native Mobile Apps using React Native