Code Splitting in React Native Applications

Paweł Trysła

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more


When it comes to React Native applications, the code for your application shares some aspects of the browser applications - web apps and we do have a well-established and thought-out solution for splitting functionality on the web which is called code splitting.

Thinking about mobile apps, we usually have a mental model of a single runnable program that includes all the possible features. In fact, that’s how most of the mobile apps are architected and there’s a simple reason for that - it’s difficult to split functionality and deliver it later in a fully native mobile application. Especially if we are talking about cross-platform solutions for both iOS and Android.

Why not bring this support to React Native? It turns out that it is in fact possible, but first, we need to understand it on a high level.

In this article, I’ll focus on the idea of code splitting to introduce the concept and create a basic understanding of the technique.
In the next one, we will go through technical details and implementation of code splitting using Webpack and Re.Pack - a Webpack-based toolkit to build your React Native application with the full support of the Webpack ecosystem.

How does React Native run your code?

Most of the time, developing React Native applications means writing the JavaScript (or TypeScript) code with the dependencies coming from repositories like NPM. However, the React Native runtime doesn’t understand our code in such form - it has no idea how to combine multiple files together or how to pull in the dependencies. It might even not understand our code at all due to unsupported syntax or type annotations. That’s why we need a tool to convert our code into a format that can be executed by React Native. This format is called a bundle, and the tool to create it - a bundler.

how does react native run the code

<p-bg-col>A bundler takes your source code, any dependencies and external libraries as well as static assets you use; transforms them, optimizes them and packs them together into a runnable bundle.<p-bg-col>

What is <cyan>code splitting<cyan>?

Code splitting is a technique that allows developers to create multiple bundle files instead of just one. By default, all your input files (source code, dependencies and assets) are combined into a single file. With code splitting, they are split into multiple ones.

what is code splitting diagram

We call each of the output files a chunk, while the main chunk (also known as entry chunk) can be referred to as a bundle.

The bundle is still used as an entry point to the application, so React Native will execute it first, then it will load additional chunks on-demand.

<p-bg-col>Code splitting is a technique to produce multiple output files which, as a whole, contains all your application’s functionality, but allows them to be loaded later on demand.<p-bg-col>

Code splitting in React Native apps - use cases

Ultimately, it’s up to you to decide if your React Native application would benefit from code splitting, but there are some categories of applications that are good candidates for code splitting.

Underperforming application

Code splitting is a viable candidate for any kind of application, which has performance issues, especially in the startup area. Moving the code from the bundle to the additional chunk is a deferral technique. If used correctly, your React Native application will load only the necessary pieces of the code and postpone the load of others, which can help improve startup performance (TTR/TTI).

Modular applications

Applications that expose different functionalities or different UIs based on user’s details are a great example of apps that would greatly benefit from code splitting.

modular applications diagram

Let’s take an e-learning application for instance. With code splitting, it’s possible to separate a student’s and a teacher’s functionalities, so the application loads either of them, while decreasing the initial download size student or teacher would have to download and improving startup performance by loading only relevant code.

Another examples of applications worth mentioning would be:

  • an automotive application, which gives the user features based on their subscription plan
  • a word processing application that provides language-specific functionalities. Each language can have a dedicated chunk loaded on-demand.

Super apps / Mini app stores

Another two groups of applications where code splitting plays a huge role are so-called super apps and applications with mini app stores. Both super apps and mini apps stores are applications built from smaller, dedicated mini apps.

Instead of having multiple applications on the App Store and Google Play you can combine them into a single one while streamlining the development and simplifying management.

super-apps and mini-app stores chart

<p-bg-col>You can think of super apps as all-in-one mobile experiences - a closed ecosystem on many smaller apps.<p-bg-col>

WeChat and Alipay are great examples of super-apps used by millions. With code splitting it’s possible to achieve it with React Native.

How to introduce code splitting into React Native applications?

Code splitting and the examples shown above are nothing new in Web development thanks to Webpack - a bundler for modern JavaScript applications. Due to its widespread adoption and rich feature set, we (at Callstack) decided to bring support for bundling React Native applications to Webpack.

And this is how we’ve built Re.Pack - a toolkit that allows you to use Webpack and its code splitting functionality to bundle React Native apps.

In the next article, we’ll take a closer look at how Re.Pack can help us build React Native applications and leverage code splitting.

Stay tuned!

You can also take a look at other services offered by our React Native development company.

Paweł Trysła
Fullstack Developer, the tooling guy with extensive knowledge of Webpack and Babel. Huge fan of Electron, functional programming and RxJS.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.