How we reduced bundle size by 15% with patching package
Why Bundle size matters
In today’s fast-paced digital world, mobile applications have become an integral part of our daily lives. From social media platforms to productivity tools, we rely on these apps to stay connected, entertained, and organised. However, there is one critical aspect that often goes unnoticed by users but plays a significant role in determining the app’s performance and user experience — bundle size.
Bundle size refers to the total file size of an application when it is downloaded or updated on a mobile device. It includes all the necessary code, assets, and resources that make the app function. While it may not seem like a big deal, the bundle size can have a profound impact on the app’s performance, user satisfaction, and overall success. Here’s why it matters:
- Download and Installation Time: A large bundle size means users have to wait longer for the app to download and install on their devices. In today’s era of instant gratification, people have little patience for slow downloads. If your app takes too long to install, users may abandon the process altogether, resulting in lost potential users.
- Storage Space: Mobile devices have limited storage capacity, and users are constantly juggling between various apps, photos, videos, and other files. If your app has a bloated bundle size, it can quickly eat up valuable storage space, forcing users to delete other apps or files to accommodate it. This can be a significant deterrent for users who are hesitant to sacrifice their existing content for a single app.
- Performance and Responsiveness: A large bundle size can impact an app’s performance and responsiveness. When an app launches, it needs to load all the necessary code and resources into memory. If the bundle size is substantial, it can lead to longer loading times, increased memory usage, and potentially slower overall performance. Users expect apps to be snappy, smooth, and highly responsive, and a bloated bundle size can be a major roadblock to achieving that.
- Data Usage: Mobile data plans come with limits, and many users are conscious of their data usage to avoid overage charges. If an app has a large bundle size, it can consume a significant amount of data during installation, updates, and even regular usage. This can be a concern for users who want to conserve their data or have limited connectivity options.
- User Experience: Ultimately, the bundle size directly impacts the user experience. Users expect apps to be efficient, streamlined, and optimized for their devices. A large bundle size can lead to sluggish performance, crashes, and overall dissatisfaction. Users may be more likely to abandon or uninstall an app that doesn’t meet their expectations.
Ways to optimise bundle size
So, what can developers do to optimise bundle size and ensure a smooth user experience? Here are a few strategies:
- Code Optimisation: Minify and compress code to reduce its size without sacrificing functionality. Remove unnecessary comments, whitespace, and unused libraries.
- Asset Compression: Compress images, videos, and other media files to reduce their size without compromising quality. Use appropriate file formats and consider lazy loading techniques.
- Resource Management: Evaluate the necessity of each resource and remove any unused or redundant files. Optimise resource loading and caching strategies to minimise data transfers.
- Modularisation: Break down the app into smaller modules or features, allowing users to download only what they need. Implement on-demand loading to reduce initial bundle size.
- Continuous Monitoring: Regularly analyse and evaluate the bundle size throughout the development process. Keep track of dependencies and their impact on the overall size. Consider using tools and analytics to identify potential areas for optimisation.
How to analyse bundle size
Apple:
Analysing bundle size for iOS apps typically involves examining the “ipa” file, which is the app package for iOS devices. Here are the steps to analyze iOS app bundle size:
a. Obtain the .ipa file:
- You can get the .ipa file from the App Store or by exporting the app from Xcode (if you have access to the source code).
- If you’re downloading the app from the App Store, you can use tools like Charles Proxy or iMazing to intercept and download the .ipa file.
b. Inspecting Bundle Contents:
- Rename the .ipa file to .zip and extract its contents. You’ll find a Payload folder.
- Inside the Payload folder, there will be an app bundle with the .app extension (e.g., Preply.app).
c. App Size Analysis:
- Use the “du” command in Terminal or Finder to get the total size of the .app bundle.
- To analyse the size of individual files, use tools like “Finder’s Get Info,” “ls” command in Terminal, or third-party apps like DaisyDisk or GrandPerspective.
d. Symbolication:
- If the app is built with symbols, you can use the “atos” command-line tool or Xcode’s “Instruments” to symbolicate crash logs and analyze memory usage.
Android:
Analysing bundle size involves examining the APK file. Here’s how you can analyse Android app bundle size:
a. Obtain the .apk file:
- You can get the .apk file from the Google Play Store or by building the app from the source code using Android Studio or Gradle.
b. APK Analyzer (Android Studio):
- If you have the app’s source code, you can use the APK Analyzer tool in Android Studio to get a detailed breakdown of the APK’s contents, including the size of individual resources, libraries, and assets.
How the team optimised bundle size
Before we could address the bundle size problem, we needed to identify the major contributors to the inflated size. We utilized Android Analyzer to visualize the bundle contents.
The analysis revealed that two specific third-party packages were responsible for a significant portion of the app’s size.
First package is react-native-agora we use for Video calls. It is crucial for the app’s functionality, so simply removing it was not an option. Based on analyzer we found that there are multiple native submodules, imported by Agora SDK.
According to Agora’s documentation for native projects we can explicitly redefine module specification in gradle config for Android and podfile for iOS.
Since we use Agora’s wrapper for react-native, we need to patch wrapper instead of own configuration, since it has higher priority over our configuration.
Next screenshot after tweaked config, as you can see there are much less submodules contained in the resulting bundle.
After applying patch-package, we reduced bundle size for extra 8mb for each CPU architecture.
Next package we touched is react-native-view-pdf we used for two places: in the Chat and “Terms & Conditions” page.
Based on analysis it’s in the top 3 of largest sizes in the library, approx 2.5mb in total for each CPU architecture. We decided to replace library with simple webview. One obstacle during implementation was lack of support for rendering .pdf on Android side. The hack is to render webview document in google documents wrapper.
Conclusion:
App size optimization is a continuous process, by diving deep into specific third-party packages, we can make substantial reductions in bundle size without compromising functionality. By patching / removing just two packages in React Native, we successfully achieved a 15% reduction in the app’s size.
For the next steps, we’re about to start to research assets and SVG optimizations, jsbundle reduction and more, stay tuned!
