React Native Bundle Varieties
There are four kinds of bundles you might encounter in React Native.
This is your run-of-the-mill bundle, the one that gets generated with the
react-native bundle command. It comes in either a dev or release flavor, with the primary difference being that the release flavor is optimized and minified. After building the dependency graph of all modules referenced in your app, a bundle is effectively a concatenation of all these modules.
This is the version of unbundle that is used by Android by default. Given all the modules in your app, a file-based unbundle is made up of an entry point file and a folder called
js-modules that includes a file-per-module for each of the modules in your dependency graph. Each module is assigned an index, and all require calls in your app are rewritten from a module name to the module index assigned to that module. There’s also a magic file called
UNBUNDLE in the
js-modules folder that signals to React Native that your app bundle is an unbundle, and the app should configure itself to load modules on-demand.
Generating React Native Bundles
Generating bundles for React Native can be done with the react-native-cli.
The only options that are required are
--bundle-output. Most apps will also need to use
--assets-dest if the app has any images, HTML files, or other assets that are referenced using
Generating an unbundle is no different than generating a bundle. The command line options are identical except for one additional option
--indexed-unbundle. Since an indexed unbundle is the default and only supported behavior for iOS, you would only use this flag if you wish to have an indexed unbundle on Android (or Windows!).
I would definitely recommend evaluating the performance of your app when using unbundle versus a standard bundle before committing to unbundle. For smaller apps with relatively few modules (say, a few hundred small modules), the bundle size may only be a few MBs, and the overhead of many more IO operations may outweigh the benefits of loading the entire bundle at app startup. You may also find that the penalty for IO occurs at an unacceptable point in your app, but there are many workarounds to ensure critical modules are loaded in advance from an unbundle.