How I reduced my app size from 75MB to 34MB !!

#reactnative #javascript #mobile #android

🕜 The Lore

So recently I was hired by Neurobridge Tech. as a Senior Mobile app developer to develop and lead end-to-end product development of their Flagship app Chanakya AI !

Wanna checkout the app?
Download Android
Download iOS

Now they already had the app released and users were using it quite a much. But the app size was around 75mb at that time. So naturally we had some issues with performance, scale, etc but we will discuss that in the next post.

Back to the lore, now as industry-standard a Simple app without any complex processing at the client side or 30-40 heavy animation screens, the app size should not be more than 25 MB; but as we are using Server side event handling and some advanced features, 35Mb is fine.

But here we are with a Big Chungas 75MB Asteroid Destroyer !!

The Realization....

I started by identifying where we were using spaces. After a good look ( I was traumatized by the code base ) I discovered that the whole app needs to be refactored with better code practices and more optimized manner
(Some things are beyond salvation )

The Recreation (But Better)

Hence after getting OCD from the old code base, I started making new architecture while referring to old ones.

Now here comes the main part -

1. 🛞 Reinventing Wheel

I noticed that previously we made different screens and components for the functionalities which were 80% the same ( Logged-in user and Guest user ) So I started by combining both flows to reduce the code base.

I deleted over 300 files of code and brought the whole code base to 75% less code ( 1500 lines of code to approx 350 lines ).

One of the things to always remember is that, if 2 or more modules have the same base functionality of over 70%, it is always better to keep them in a single source while maintaining a conditional execution.

2. 🖼️ The Collector

As development is a rapid thing in startups, we often forget to delete any unnecessary files or assets that might make our app heavy from shadows.

I analyzed and modularised whole images and assets and deleted the unused media leading to size reduction while bundling assets.

3. ♾️ Domain expansion - NPM Install

As more experienced you get, the more you realize that if it can be done manually then just do it.

Don't be that guy "Just one more module bro, I can remove it anytime I want"

Using Node modules for every little thing even when you can do it yourself isn't cool ! This Bad boi had 3.5GB of Node modules in it ( YESS the freaking GigaByte ) !

I don't know how it happened, and really not interested to know as well!

All I cared about was reducing it to minimal while recreating most of the functionalities and removing unused linked modules as native linked modules get bundled even if they are not used in JS code.

4. 🦚 Geeta Method - The Single Source of Truth

Often while developing a complex and interlinked application, we forget to make it modular and more globalized.

Previously we were using all values, methods, functions, etc by hardcoding them directly in place, which led to extra compilation and memory usage. Leading to a bad product.

I Modularized every reusable item ( variables, strings, functions, data handlers, etc ) to make sure everything gets initialized only once and then can be used by reference.

✅ Conclusion

With all this refactoring and carefully crafted code in 2 weeks, we were finally able to reduce the app size from 75MB to 34MB in stores.

A Smaller app not only runs faster but plays a crucial role in user traffic. Nobody wants a Big Chungus app with a slow process, everyone likes to keep it small, fast, and quick.

🎁 Bonus Content ( Cause why not )

While keeping the app size at best, I also made the whole app 🚀 80% faster in performance and reduced the Network request down to 50% ultimately leading to