How to keep your react-native app size under check
May 28, 2021
"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.
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)
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:
Opt into Play App Signing. This means that you have to upload your app signing key and Google will use this to create APKs.
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):
(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:
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.
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.
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.
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.
Before: Download size approaching 50MB and installed size has breached 100MB
Another important achievement was that our app was now 18MB smaller than the peer group
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.
This website/application including the ‘KristalFlex’ platform is owned, operated and maintained by Globalise Inc., a company incorporated in United States of America (the “Company”). The information placed on the platform is for informational purposes only and does not constitute as an offer to sell or buy a security. The Company reserves the right to make modifications and alterations to the content available on the platform. The Company is neither registered as an investment advisor nor as a broker dealer. The KristalFlex platform offers users access to investments in global securities through multiple stock exchanges and such other services as may be provided either directly or through its affiliates and partners. Price and availability of products and services offered on the platform are subject to change without prior notice. The Company will not be liable for any lack of availability of products and services you may order through the platform.
Do note that investment in securities market are subject to market risks. The valuation of securities may increase or decrease depending on various factors affecting the securities market. The services being provided by through the KristalFlex platform is not professional investment advice. All the recommended list of offshore funds, portfolios etc. being provided through the platform shall be/are in the form of generic research reports on offshore securities and shall be accessible by all authorised / subscribed users of these services at the same time.
The platform and the services thereunder are provided on an “as is” basis. The Company makes no warranties or representations, express or implied, on products offered through the platform. It accepts no liability for any damages or losses, however caused, in connection with the use of, or on the reliance of its product or related services. The Company is not responsible for any technical failure or malfunctioning of the software or delays of any kind and is also not responsible for non-receipt of any e-mails. You shall bear all responsibility of keeping the password secure and shall be solely responsible for the loss or misuse of the password.
Any descriptions of, references to, or links to other products, publications or services does not constitute an endorsement, authorization, sponsorship by or affiliation with the Company or its affiliates unless expressly stated otherwise. Any such information and/or products have not necessarily been reviewed by the Company and are provided or maintained by third parties over whom the Company exercises no control. Certain hyperlinks or referenced websites on the platform, if any, are for your convenience and forwards you to third parties’ websites. The Company will, under no circumstance, be responsible for the content, the accuracy of the information, and/or quality of products or services provided by or advertised on these third-party websites. The Company does not endorse in anyway any advertisers/ contents of advertisers on its webpages or the KristalFlex platform.
We are licensed in Singapore, Hong Kong and India. Kristal Advisors (SG) Pte. Ltd. presently operates under the CMS license by the Monetary Authority of Singapore (MAS). Kristal Advisors (HK) Ltd is licensed and regulated by the Securities and Futures Commission (SFC) to carry out Type 4 and Type 9 regulated activities and is not involved in the discretionary management of any collective investment scheme. Kristal Advisors Private Ltd. presently operates as a Registered Investment Advisor under the jurisdiction of the Securities and Exchange Board of India (SEBI).
This is offered only to Accredited and Institutional Investors as defined under the Securities and Futures Act, Chapter 289 of Singapore (“Act”), which broadly comprises of regulated financial Institutions, large corporates, high net worth individuals and sophisticated investors.
An Accredited Investor is an individual
Whose net personal assets exceed in value SGD 2 million (or it’s equivalent in a foreign currency) with value of his/her primary residence capped at SGD 1 million, or
Whose financial assets (net of any related liabilities) exceed in value SGD 1 million (or it’s equivalent in a foreign currency), or
Whose income in the preceding 12 months is not less than SGD 300,000 (or it’s equivalent in a foreign currency)
I agree to opt-in as Accredited Investor and will submit required documentation to confirm the same.