Thursday 4 April 2024

Steps to Optimize the bundle size of a React Native Production application

 Reducing the bundle size of a React Native application can be achieved through several methods:


  • Remove Unused Libraries and Assets: Check your project for any libraries or assets that are not being used and remove them using React-Native-Bundle-Analyzer. This is the most straightforward way to reduce the size of your bundle.

  • Use Hermes: Hermes is a JavaScript engine optimized for running React Native. It can significantly reduce the size of your JavaScript bundle and improve the startup time of your app. To enable Hermes, edit your android/app/build.gradle file:



project.ext.react = [

    enableHermes: true  // here

]


  • Optimize Images: Use smaller images whenever possible. If you have large images, consider compressing them or resizing them. You can use online tools or libraries like react-native-image-resizer.



  • Use Proguard: Proguard is a tool that can help to reduce the size of your Java code for your Android app. It's enabled by default in React Native for Android. Make sure it's enabled in your android/app/build.gradle file:



def enableProguardInReleaseBuilds = true



  • Split APK by Architecture: You can reduce the size of your APK by splitting it into multiple APKs based on the CPU architecture (armeabi-v7a, arm64-v8a, x86, x86_64). This can be done in the android/app/build.gradle file:



android {

    ...

    splits {

        abi {

            reset()

            enable enableSeparateBuildPerCPUArchitecture

            universalApk false  // If true, also generate a universal APK

            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"

        }

    }

    ...

}



  • Use App Bundles: If you're targeting Android, consider using Android App Bundles (.aab) instead of APK. App Bundles are a publishing format that includes all your app’s compiled code and resources, but defers APK generation and signing to Google Play. Google Play’s new app serving model, called Dynamic Delivery, then uses your app bundle to generate and serve optimized APKs for each user’s device configuration, so they download only the code and resources they need to run your app.



Remember, always measure your app size before and after making these changes to understand the impact of your changes.


No comments:

Post a Comment