React Native Multi Bundle Questions

[myfaverate]

Minimal reproducible example

https://github.com/myfaverate/ReactNativeHotLoadMultiBundle

Prerequisites:

$ npm run start
$ curl "http://localhost:8081/index.bundle?platform=android&dev=true&minify=false"
$ curl "http://localhost:8081/home.bundle?platform=android&dev=true&minify=false"
$ curl "http://localhost:8081/user.bundle?platform=android&dev=true&minify=false"

Expectation

MainActivity -> index.bundle -> development: hot load, production: assert -> index.android.bundle # default implementation

HomeActivity -> home.bundle -> development: hot load, production: assert -> home.android.bundle
UserActivity -> user.bundle -> development: hot load, production: assert -> user.android.bundle

Questions

This project has already enabled multi-bundle support through simple Metro configuration.
Now, three questions need to be addressed:

1. In large-scale projects, is it necessary to split bundles when using the new React Native architecture?

2. In the context of this project, how can we configure Android and iOS to load home.bundle and user.bundle the same way as index.bundle, with support for hot reloading — primarily for use during development?

3. Does npx react-native bundle support generating split bundles with dependencies — for example, a main common bundle and child sub bundles? And under the new architecture, how can we load bundles that have dependency relationships?

[jbroma]

hey @myfaverate 👋

Metro does not support splitting bundles for production target - it's only used in development to speed up bundling & HMR.

We're also working on adding Module Federation support to Metro bundler: facebook/metro#1480

You can check out the POC here: https://github.com/module-federation/metro-mf

[jbroma]

There is also https://github.com/callstack/repack which uses webpack/Rspack to bundle React Native apps and there we have full support for code-splitting & Module Federation