Bundle Size and Lazy Loading
Analyze the JS bundle with react-native-bundle-visualizer, identify large dependencies, apply dynamic import() for heavy screens, and measure the before/after bundle size.
Why Bundle Size Affects Startup Time
The JavaScript bundle is the single file that contains all your app's code and most third-party libraries. Hermes parses and executes this file on every app cold start. A larger bundle means a longer startup time — even a 500KB increase can add hundreds of milliseconds to your time-to-first-interaction on mid-range Android devices.
Bundle size optimization is especially important in React Native because all JavaScript must load before the first screen can render. Unlike a web app where you can lazy-load route chunks before rendering, React Native apps pay the full bundle cost upfront.
Hermes Bytecode and Bundle Measurement
When Hermes is enabled (the default since RN 0.70), the JavaScript bundle is pre-compiled to bytecode at build time. This reduces parse time but the raw bundle size still affects how much bytecode the engine must load.
Measure your current bundle size by running the Metro bundler with the --bundle-output flag and checking the output file size. Compare the bundle before and after changes to measure the impact of your optimizations.
# Generate the bundle and measure its size
npx react-native bundle \
--platform android \
--dev false \
--entry-file index.js \
--bundle-output /tmp/bundle.js
# Check the size
ls -lh /tmp/bundle.js
# e.g., -rw-r--r-- 1 user group 2.4M /tmp/bundle.js