Kristal Blog

>

Tech Blogs

>

How to keep your react-native app size under check

How to keep your react-native app size under check

"Simple checks and actionable tips that we used at Kristal.AI to reduce app size by 65% (especially Android app size)."We, at Kristal.AI, recently migrated our native app to react-native. Consequently, the Android APK size shot up from ~10MB to ~50MB. Initially, we accepted the large size as a side-effect of this framework. However, two things prompted us to act.

  1. First was the Google Play Console dashboard showing us that our app was 14MB larger than our peer group. (Median of peer group was reported to be 36MB by Google)
  2. Second was this interesting article from Google which had some great data points to highlight the importance of app size. While the article is a bit old, any steps that can minimize your app’s impact on users’ data consumption and phone storage are always worth doing. Following are two key points mentioned in the article:

For every 6 MB increase to an APK’s size, we see a decrease in the install conversion rate of 1%.

The removal of 10 MB from an app’s APK size in emerging markets correlates with an increase in install conversion rate by ~2.5%.

I will now go into the steps that we took to reduce app size and managed to bring it down by nearly 65%. The first two steps are applicable only for Android. The final step consists of general checks which you should do every once in a while for both Android and iOS Apps.

1. Move to Android App Bundle

Before we undertook this activity of app size reduction, we were distributing our app by compiling and uploading APKs. Oh man! It was frustrating to learn about App Bundles. We couldn’t believe that we were still using fat, bloated APKs! APKs are built to run on all device types and therefore contain a lot of extra code which was being sent to users without any purpose.An Android App Bundle (.aab) contains all this extra code too. But the key difference is that when you use an app bundle, you are moving the responsibility of creating APKs to Google. So every time someone downloads the app, Google will automatically generate an APK specifically tailored for the device devoid of any unnecessary code. This means all that extra code is stripped away and the download size for the user comes down significantly. In essence, moving to app bundle consists of the following steps:

  1. Opt into Play App Signing. This means that you have to upload your app signing key and Google will use this to create APKs.
  2. Choosing Android App Bundle when creating builds in Android Studio. Alternatively, you can navigate to the android folder and run this command (you’ll have to manage signing the aab):

./gradlew bundleRelease

  1. (Optional) For increased security, you can sign the app bundle using a separate upload key. This means that you are no longer responsible for keeping the main app signing key safe. Unlike the main key, it is possible to replace the upload key if lost.

2. Using Proguard (and separate builds for CPU architectures)

In your source folder navigate to android/app/build.gradle and add the following lines

def enableProguardInReleaseBuilds = true

Proguard optimizes and shrinks down your Java bytecode, thereby reducing app size.

def enableSeparateBuildPerCPUArchitecture = true

There are several CPU architectures that Android supports (armebi and x86 for example). By creating separate builds for each, we are able to cut down on app size. As we are using App Bundle, we don’t have to handle the separate APKs and Google will do the heavy lifting for us.

3. Cleaning up assets and libraries

Finally, I will mention some general steps that can help keep both android and iOS app sizes in check. These simple steps will also boost performance by making the bundle loading step faster:

  1. After moving to react-native, images are stored in a common assets folder for both Android and iOS to access. However, our existing native app already had a ton of images in the android and iOS folders that were used earlier. We deleted most of the images in the native res folders straight away. We also periodically inspect the common react-native assets folder and remove unused images.
  2. All images should be compressed to a reasonable size before inclusion. It makes no sense to have high-resolution png or jpeg only to have them displayed in a tiny area in the app. There are many online tools to compress images without any visible effect on quality.
  3. We removed all native android and iOS libraries that were no longer required after moving to react-native. Also, some regular housekeeping to remove unnecessary npm packages goes a long way. We removed all old native activities and xml files which were now dead weight.
  4. Check the fonts folder for any unused fonts. For especially large fonts, think hard whether the visual impact of the font merits its inclusion in the app.

Some numbers

Before: Download size approaching 50MB and installed size has breached 100MB

After: Download size is down to 18.1MB!

Another important achievement was that our app was now 18MB smaller than the peer group

Significantly smaller app size than the competition

Conclusion and future plans

As is evident from the numbers, these steps have given us good results. Most of the reduction has come from the move to Android App Bundle. But the general steps mentioned will prevent the size from creeping up again over time and will also speed up JS bundle loading.While we are currently satisfied with these numbers, there are a few more things that we plan to do to further optimize app size. They include but are not limited to: using react-native-bundle-visualizer to further optimize npm packages, trying to completely eliminate certain libraries like testing libraries from production builds and enabling hermes which improves JS performance.

By

Kshitij Gangal

May 28, 2021

Liked it?
Share it with your friends & colleagues!

Related articles

Go to Blog

Ready to start investing?

A fully digital onboarding process that can be completed within 15 minutes.
No more voluminous paperwork and queuing!

How would you want to invest?

Your Details

Financial Guide Details

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your Details

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

I understand the financial products and would want to proceed with investing without a financial guide

X