Building JavaScript bundles for React Native

Metro is the default JavaScript bundler shipped with React Native. De Oleza says its goals include sub-second reloads, keeping load times steady as codebases grow, and supporting React Native features such as remote debugging, hot module reloading, and asset generation.

A bundle contains a runtime, transformed application modules, and startup code. Metro’s runtime registers modules with `__d` and loads them with `__r`, caching exports so modules are evaluated only once. The startup code requires the entry point, which Metro assigns module ID 0.

Metro first creates a dependency graph, then serializes it as a bundle, source map, or another output. Graph generation transforms code with Babel, finds `require` and `import` statements, and resolves dependencies, including platform-specific files such as `Button.android.js` and `Button.ios.js`. Metro handles cycles and repeats this process until it has discovered all dependencies.

De Oleza describes three ways Metro reduces transformation costs: caching, parallel work, and the delta bundler. Facebook’s layered cache includes a remote HTTP cache populated by continuous integration; Jest’s worker package lets Metro transform files across CPUs. During development, the delta bundler tracks changes and sends updated modules instead of rebuilding and sending the whole bundle.

The regular bundle serializer concatenates modules, while the React Native RAM bundle stores them in a binary format with a lookup table. RAM bundles inject the runtime and startup code first, then load modules into the JavaScript virtual machine when required, reducing startup parsing and memory use. Inline requires help preserve lazy loading and can keep dependencies out of production bundles when their surrounding development condition is removed.