How to optimize react native build size in Production ? Explained someTechniques

React Native is a popular framework for building mobile apps using JavaScript and React. One of the challenges developers face when building React Native apps is the app size. Mobile users have limited storage space, and larger app sizes can discourage users from downloading or keeping an app installed. Therefore, it is essential to optimize the size of React Native apps to improve user experience and increase adoption rates.

In this article, we will discuss some tips and techniques for optimizing the size of React Native apps.

1. Use dynamic imports

Dynamic imports are a technique that allows you to import modules on demand instead of importing them all at once during the build process. This can help reduce the app size by only including the modules that are needed for a specific screen or feature.

Here is an example of how dynamic imports can be used in React Native:

import { View, Text } from 'react-native';

function MyComponent() {
  const [showText, setShowText] = useState(false);

  const toggleText = () => {
    setShowText(!showText);
  };

  return (
    <View>
      <Button title="Toggle Text" onPress={toggleText} />
      {showText &&
        import('./MyText').then(({ default: MyText }) => (
          <MyText>Hello, World!</MyText>
        ))}
    </View>
  );
}

In this example, we use the dynamic import() function to load the MyText component only when the user clicks the “Toggle Text” button. This can help reduce the initial app size by only including the MyText component when it is needed.

2. Remove unused dependencies

React Native apps often include many dependencies, some of which may not be necessary for the app’s functionality. Removing unused dependencies can help reduce the app size and improve performance.

To remove unused dependencies, you can use a tool like depcheck or npm-check to identify and remove dependencies that are not used in your code.

3. Use a smaller font library

React Native apps often use font libraries to provide a consistent look and feel across the app. However, some font libraries can be quite large, which can increase the app size.

To reduce the app size, consider using a smaller font library, such as Google Fonts. Google Fonts offers a wide variety of fonts that are optimized for the web and mobile devices and can be easily integrated into your React Native app.

4. Optimize images

Images can be a significant contributor to the app size, particularly if they are not optimized for mobile devices. To optimize images, you can use tools like ImageOptim or Kraken.io to reduce the file size without sacrificing quality.

Additionally, consider using the react-native-fast-image library to improve image loading performance. This library uses a number of techniques to improve image loading times, including preloading and caching images and using native image components.

5. Use code splitting

Code splitting is a technique that involves splitting your code into smaller, more manageable chunks that can be loaded on demand. This can help reduce the app size by only loading the code that is needed for a specific screen or feature.

React Native supports code splitting out of the box through the use of dynamic imports, as we discussed earlier. You can also use tools like Webpack or Rollup to further optimize code splitting.

6. Enable minification

Minification is a process that involves removing unnecessary characters, such as whitespace and comments, from your code to reduce its size. Enabling minification can help reduce the size of your app’s JavaScript bundle and improve performance.

To enable minification in your React Native app, add the following line to your app’s metro.config.js file:

7. Use tree shaking

Tree shaking is a technique that involves removing unused code from your app’s JavaScript bundle. This can help reduce the size of your app’s code and improve performance.

To use tree shaking in your React Native app, ensure that your code is written in a modular way and that you are using modern JavaScript features, such as ES6 modules. Then, enable tree shaking in your app’s build process by using a tool like Webpack or Rollup.

8. Avoid using unnecessary libraries

Using unnecessary libraries can increase the size of your app and impact performance. Therefore, it is essential to only include the libraries that are necessary for your app’s functionality.

Before adding a new library to your app, consider whether it is essential and whether there are alternative solutions that can achieve the same functionality without increasing the app size.

9. Use a smaller state management library

State management is an essential part of React Native development, but some state management libraries can be quite large. To reduce the size of your app, consider using a smaller state management library, such as Unstated or MobX.

These libraries provide a lightweight solution for state management, which can help reduce the app size and improve performance.

10. Use smaller alternatives to React Native core components

React Native core components, such as View and Text, can be quite large, particularly when used frequently throughout your app. To reduce the app size, consider using smaller alternatives to these components, such as react-native-lightweight-charts instead of react-native-charts-wrapper.

These alternatives provide similar functionality but are optimized for mobile devices and have a smaller footprint.

11. Use Proguard in production build

Proguard is a tool that helps to reduce the size of Android applications by shrinking, optimizing, and obfuscating the code. It is especially useful for React Native developers who want to reduce the size of their Android builds.

Here are the steps to use Proguard in your React Native build:

1. Add the Proguard plugin to your app’s build.gradle file:

buildscript {
  ...
  dependencies {
    ...
    classpath 'com.android.tools.build:gradle:3.3.0'
    classpath 'com.android.tools.build:gradle:3.4.0'
    classpath 'com.android.tools.build:gradle:3.5.0'
    classpath 'com.android.tools.build:gradle:4.1.0'
    classpath 'com.android.tools.build:gradle:4.2.0'
    classpath 'com.android.tools.build:gradle:4.3.0'
    classpath 'com.android.tools.build:gradle:4.4.0'
    classpath 'com.android.tools.build:gradle:4.5.0'
    classpath 'com.android.tools.build:gradle:7.0.0'
  }
  ...
}

apply plugin: 'com.android.application'
apply plugin: 'com.android.library'
apply plugin: 'io.fabric'

android {
  ...
  buildTypes {
    release {
      ...
      minifyEnabled true
      proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
  }
  ...
}

dependencies {
  ...
  implementation 'com.android.support:multidex:1.0.3'
  implementation 'com.google.firebase:firebase-analytics'
  implementation 'com.crashlytics.sdk.android:crashlytics'
}

Create a proguard-rules.pro file in the android/app directory of your project. This file contains the rules that Proguard uses to shrink, optimize, and obfuscate your code. Here is an example of what your proguard-rules.pro file might look like:

# React Native
-keep class com.facebook.react.bridge.** { *; }
-keep class com.facebook.react.uimanager.** { *; }
-keep class com.facebook.react.common.** { *; }
-keep class com.facebook.react.views.** { *; }
-keep class com.facebook.react.module.model.** { *; }
-keep class com.facebook.react.module.annotations.** { *; }

# Firebase
-keep class com.google.firebase.** { *; }
-keepattributes InnerClasses
-keepattributes Signature
-keepattributes *Annotation*
-keepclassmembers class ** {
  @com.google.firebase.database.IgnoreExtraProperties *;
}

# Crashlytics
-keepattributes SourceFile,LineNumberTable
-keep public class * extends java.lang.Exception

12. Build your React Native app for release:

react-native run-android --variant=release

After the build completes, you will find the APK file in the android/app/build/outputs/apk/release/ directory. The APK file will be smaller than before because Proguard has shrunk and optimized the code.

Note: Proguard can sometimes cause issues if it removes classes or methods that are necessary for your app to function properly. Therefore, it is important to thoroughly test your app after enabling Proguard to ensure that it is working correctly.

In conclusion, using Proguard in your React Native build can significantly reduce the size of your app and improve performance. By following the steps outlined above, you can easily enable Proguard in your React Native project and start benefiting from its features.

That’s it.

Please follow me on Gopesh Jangid to get notified on new articles.

Thank you!!!

You need to login in order to like this post: click here