Code Splitting in React Native

Code splitting divides an application into multiple bundles that can load on demand or in parallel. A main bundle contains the entry point and the minimum code needed to show the app; additional chunks hold features or logic for later use. Loading less code at startup can improve time to render and time to interactive.

Super apps such as WeChat and Alipay can defer downloading mini apps until users need them; Trysła cites one million mini apps in WeChat. Modular apps can also load features according to user role, subscription, or preferences. Examples include separate student and teacher features in e-learning apps and vehicle-specific features in automotive companions.

Trysła describes Android Play Feature Delivery as a possible fit for brownfield apps, though sharing one JavaScript runtime is difficult. On iOS, On-Demand Resources can deliver assets, but not native code, and he says dynamic native code could run into App Store review issues. WebViews and Metro-based approaches have tradeoffs, so Callstack built Re.Pack to let webpack produce bundles that run in React Native.

Trysła outlines async chunks, dynamic scripts, and Module Federation. Async chunks use dynamic imports from one codebase and suit modular apps; dynamic scripts can load arbitrary code but require developers to manage loading and dependency sharing. Module Federation supports separately built containers and may suit super apps, though it is harder to manage and was not yet supported in Re.Pack at the time of the talk.

At the time, Re.Pack could download and execute remote or local chunks, use basic caching and invalidation, and resolve chunk URLs with custom logic. Planned work included chunk signing and verification, more caching and fetching options, local asset support, and more documentation. Trysła notes that the APIs were still being developed and could change.