Revolutionise Your Workflow: Cut React Native Build Time by 67%!

Building your React Native app could be expensive and take several minutes of developers time. This can be problematic as your project grows and generally in bigger organisations with multiple React Native developers. But what if I told you there’s a way to significantly reduce your build time?

Imagine this: your current build time stands at a whopping 2 minutes and 4 seconds.

Now, imagine reducing that time to a mere 41 seconds.

(these are taken on a M2 Mac but the reduction in time should be similar on all devices)

Yes, you read that right. From over two minutes to less than a minute. That’s a 67% reduction in build time, giving you back valuable minutes in your development cycle.

But how is this possible, you ask? What’s the secret to achieving these impressive time savings?

Enter ccache.

ccache is a compiler cache. It speeds up recompilation of C/C++ code by caching previous compilations and detecting when the same compilation is being done again. This can significantly reduce the time it takes to recompile code, especially in larger projects.

Step 1: Install ccache

First, you need to install ccache. If you're using macOS, you can do this by running the following command in your terminal:

brew install ccache

Step 2: Add Ccache to Your Path

After installing ccache, you need to add it to your path. You can do this by adding the following line to your shell profile file (like .bashrc, .bash_profile, or .zshrc):

export PATH="/opt/homebrew/opt/ccache/libexec:$PATH"

Then, source your profile file or open a new terminal session to apply the changes.

Step 3: Configure Ccache

Next, you need to create symbolic links to ccache for various compilers. You might need sudo for this. Run the following commands in your terminal:

sudo ln -s $(which ccache) /usr/local/bin/gcc
sudo ln -s $(which ccache) /usr/local/bin/g++
sudo ln -s $(which ccache) /usr/local/bin/cc
sudo ln -s $(which ccache) /usr/local/bin/c++
sudo ln -s $(which ccache) /usr/local/bin/clang
sudo ln -s $(which ccache) /usr/local/bin/clang++

Step 4: Verify the Configuration

You can verify that ccache is set up correctly by checking which version of gcc will be used. Run the following command in your terminal:

which gcc

If the output is /usr/local/bin/gcc, then you're effectively calling ccache which will wrap the gcc calls.

Step 5: Test the Setup

Finally, to test the setup, delete your android/build folder and run your compilation command again. You should notice a significant reduction in build time.

Utility Scripts

Cache Clean

If you need to clear your cache, you can do so with the following command:

ccache --clear

Cache Stats

You can check the cache hits/miss rate with the following command:

ccache -s

This command aggregates the stats over all builds. You can reset them before a build to verify the cache-hit ratio with ccache --zero-stats.

What Can Go Wrong and How to Fix

Please note that this setup of ccache will affect all the compilations that you're running on your machine, not only those related to React Native. If you're failing to install/compile other software, this might be the reason. If that is the case, you can remove the symbolic links you created with the following commands:

sudo unlink /usr/local/bin/gcc
sudo unlink /usr/local/bin/g++
sudo unlink /usr/local/bin/cc
sudo unlink /usr/local/bin/c++
sudo unlink /usr/local/bin/clang
sudo unlink /usr/local/bin/clang++

This will revert your machine to the original status and use the default compilers.

And there you have it! With ccache in your toolkit, you're now ready to drastically cut down your React Native build times. But what does this really mean for you and your team?

Just like Dinesh and Gilfoyle from Silicon Valley, who referred to their team as “stallions”, each one more magnificent than the last, you too can now look at your team in the same light.

With the time you’ve saved, your team can focus on what truly matters — building amazing features, squashing bugs, and delivering a stellar product. You’re not just developers. You’re a team of stallions, ready to gallop ahead in the race, leaving your competitors in the dust.

So go forth, embrace ccache, and let the speed of your development process be the wind beneath your wings. Remember, in the world of software development, every second counts. And with ccache, you're making every second work in your favor. The race is on, stallions!

Contributors:

Kartik Rana