How to Reduce App Load Time with Code-Splitting and Lazy Loading in React Native

What is Code-Splitting?

Code-splitting means breaking your JavaScript bundle into smaller chunks instead of shipping one large bundle. This allows the app to load essential code upfront and fetch additional code only when required.

In React Native, bundling works differently from web apps, but code-splitting is still possible using:

• Dynamic imports
• React.lazy
• Navigation-based lazy screens
• Feature-based chunk loading

The goal is simple:
✔ Reduce startup work
✔ Load heavy parts later
✔ Improve perceived and actual performance

What is Lazy Loading?

Lazy loading is a pattern where components, screens, or modules are loaded only when needed, rather than at startup.

Examples:

• Load product details screen only when a user taps a product.
• Load charts/analytics screens only when visiting the analytics section.
• Load video player only when opening media.

This works great for apps with many routes or feature modules.

How React Native Loads JS Bundles

React Native compiles all JS code into a single bundle by default. This bundle is loaded during app launch.

The problem:

As your app grows, so does the bundle. Everything gets loaded, even code from screens the user may never open.

With code-splitting and lazy loading, you shift from load everything → load only what’s needed.

Using React.lazy for Component-Level Splitting

React.lazy allows you to load components lazily using dynamic imports.

Example

const ProfileScreen = React.lazy(() => import(‘./screens/ProfileScreen’));

Then wrap it inside Suspense:

What gets improved?

• ProfileScreen code is loaded only when rendered.
• Reduces initial bundle weight.

Limitations

React Native support for Suspense is still improving for data fetching, but works well for code-splitting.

Navigation-Based Lazy Loading (Highly Recommended)

The easiest and most impactful way to reduce bundle size is lazy loading screens through your navigation library.

React Navigation Example

const Stack = createNativeStackNavigator();

Why this is powerful:

• Each screen is loaded only when the user visits it.
• Reduces initial JS bundle drastically for apps with many screens.
• Works out of the box without Suspense.

If your app has more than 10 screens, this alone can cut 20–40% of your startup JS load.

Feature-Based Splitting for Larger Apps

For enterprise-scale apps, organize code by feature modules.

features/

  auth/

  dashboard/

  orders/

  profile/

  analytics/

Load modules lazily:

const AnalyticsModule = React.lazy(() => import(‘../features/analytics’));

Use cases:

• Enterprise dashboards
• Admin apps
• Delivery apps
• E-commerce with many subsections

This approach keeps each area isolated and loaded only when used.

Lazy Loading Heavy Modules

Some libraries are large and rarely used. Perfect lazy-load candidates:

• Charts (Recharts, Victory)
• Maps (react-native-maps)
• Video players
• Image pickers
• PDF viewers
• Complex forms

Example: Lazy loading Video Player

const VideoPlayer = React.lazy(() => import(‘./components/VideoPlayer’));

By avoiding loading heavy modules on startup, you dramatically improve performance.

Testing Lazy Loading

You should verify:

• Split screens load correctly
• No missing module errors
• Suspense fallback appears smoothly
• Navigation waits for modules to load
• Time-to-interactive improves

Use tools like Flipper → Performance Plugin to measure improvements.

Measuring Bundle Impact

Before and after splitting, measure bundle size:

1. Generate JS bundle

npx react-native bundle –platform ios –dev false –entry-file index.js –bundle-output ios/main.jsbundle

2. Use bundle analyzer

Try:

• react-native-bundle-visualizer
• haul-bundle-analyzer

These tools visualize which modules take up most of your bundle.

Best Practices for Reducing Load Time

1. Keep home screen as light as possible

Avoid heavy components (carousel, animations, maps) on startup.

2. Remove unused libraries

Dead code bloats bundle size.

3. Prefer dynamic imports for optional features

Example:

• Load coupon engine only on checkout

4. Use lightweight alternatives

Instead of heavy charting libraries, try:

• React Native Skia
• Custom SVG charts

5. Use TurboModules & Fabric (optional)

Future native architecture reduces startup overhead.

Real-World Example

Imagine: You have an e-commerce app with 20+ screens.

Before optimization:

• Bundle size: 3.5 MB
• Cold start: ~2.1 seconds

After code-splitting + lazy loading:

• Bundle: 1.9 MB
• Cold start: ~1.1 seconds

That’s almost 2× faster load time  without removing features.

Practical Strategy for Your App

1. Identify heavy screens.
2. Convert them to lazy-loaded components.
3. Apply navigation-based lazy loading.
4. Split feature modules.
5. Lazy-load libraries like charts/maps.
6. Measure bundle size again.
7. Repeat.

Small changes stack up and lead to massive performance gains.

Additional Optimization Techniques 

To push performance even further beyond code-splitting and lazy loading, you can combine several complementary strategies that work well in large-scale React Native applications.

 1. Minify and Compress Your JavaScript Bundle

Use Metro configuration to enable advanced minification using tools like Terser. Smaller bundles load faster, especially on low-power devices.

2. Cache Bundles for Faster Subsequent Loads

React Native automatically caches bundles, but you can enhance this using tools like react-native-async-storage to cache non-critical resources and speed up warm starts.

 3. Defer Non-Critical API Calls

Avoid hitting APIs during app startup. Defer secondary data fetching (analytics, notifications, recommendations) until after initial UI is displayed.

 4. Move Heavy Work Off the JS Thread

Use libraries like react-native-reanimated, react-native-vision-camera, or TurboModules to offload computation to native threads, keeping startup smooth.

 5. Use InteractionManager

Wrap non-essential work:

InteractionManager.runAfterInteractions(() => {

  // Heavy or non-critical logic

});

This ensures critical UI elements render first, improving perceived performance.

Adding these optimizations on top of code-splitting pushes your startup time improvements even further, often reducing load times by 30–60% in real-world apps