Optimising React Native APK Size
Android App apk size and App performance has always been a major concern for React Native Developers. And our app being written in React Native, we took it as a challenge to figure out a decent solution to reduce apk size and improve app performance.
In this blog we will go through the steps we took for reducing apk size and in the next blog we will see performance improvement and app start up time reduction.
Enabling pro-guards in release builds and enabling separate builds per CPU architecture is basic standard practice that should definitely be done as discussed in many blogs written about reducing apk size. So apart from this, Initially, we were able to reduce our apk download size drastically from ~15 MB to ~9.5 MB by using webp compressed image assets instead of using png/jpeg. And also removing unused modules and classes.
But then, we upgraded our RN version from 0.56 to 0.59 Release Notes. In this release they added support for 64 bit architecture which led to huge increase in JSC size by ~4MB (size of javascriptCore) and additional ~1 MB by further addition of more features to our application. So our apk size reached again to ~14.5 MB. And we had no choice but find a way out to reduce our apk size further again. So let’s go through each and every step one by one.
Analyze JS Bundle
Let’s start by analysing JS bundle size. So the big question is, how do we know the size of JS bundle? We explored a lot and came across a cool JS tool “react-native-bundle-visualizer” that helps us to analyse JS contents and their size in JS bundle.
Just after installing the dependency and running it, we were able to find that our JS bundle was of ~7.5MB (Uncompressed). Out of which node_modules was ~6 MB. We were amazed to see that a lot of unexpected libraries were occupying huge space in JS bundle. So following are the measures that helped us to reduce JS bundle size, improved app performance which I will be discussing in next blog and also reduced apk size.
Import Cost
Using wix “import cost” extension for visual studio code, we were able to analyse cost for every imported modules. Then we only imported the required modules instead of importing entire library. And saw drastic change in JS bundle visualiser, So we did it for almost every library that occupied large space in JS bundle.
Remove unused imports
While managing import cost, we came across with many unused import statements. So removing those also helps us to reduce JS bundle size a bit.
Revisit integrated libraries
We re-visited big libraries to check if we can figure out some way to reduce some more JS size, So we removed few un-required libraries. For few libraries we reduced its import cost and hosted on our housing npm repo. Also, we started a practice for using minimum required libraries.
Write reusable code
Writing a code once and reusing it again and again is best practice to code faster, scale product and also it helps prevents JS bundle size to increase.
Analyse APK
Now, after reducing JS bundle size, we started analysing apk using “ APK Analyzer” in android studio. We noticed that we had reduced a significant size in index.android.bundle file as well as in libs folder. So we started analysing apk further.
Analyse classes.dex
We noticed that there were many modules in classes.dex and classes2.dex files which were not been used by our application but still those modules were shipped in apk. So we searched for those libraries that implemented the whole package instead of required modules. We forked & corrected those dependencies.
implementation ‘com.google.android.gms:play-services:11.6.0’ // wrong
implementation ‘com.google.android.gms:play-services-base:11.6.0’ // corrected
This removed all the unused modules from classes.dex and classes2.dex files and we were able to reduce apk size by ~2.3MB.
Analyse res folder
Using webp compressed images instead of png images, saved a lot of space for us. We have used webp resources as much as possible.
Analyse assets folder
We noticed that our assets folder in apk had a folder named js-modules with it, which contained 2000(approx) transpiled JS files. We released that those files were created due to “Ram-Bundles” integration in our app. It was about improving app performance but it did not make much of a difference in our case, so we decided to remove ram-bundles for now to be re-looked in near future.
Finally we were able to reducer our housing app apk size from ~14.5 MB to ~10.2 MB and download size to ~9.5MB.
That’s all it is!
