Optimisation d'une application React Native

Optimisation d'une application React Native

React Native est un outil fascinant pour le développement mobile. Il permet en un laps de temps relativement court de produire un application pour Android et iOS.

Ce gain de temps présente évidemment un coût qui se fait ressentir par des pertes de performances. On peut donc citer :

  • Un temps de démarrage de l'application ou Time To Interaction (TTI) plus long

  • L'augmentation de la taille de l'application

  • Utilisation plus élevée de la mémoire

Je sais ce que vous vous dites :

La facture est salée hein

Il sera question d'explorer les méthodes permettant de réduire la facture sans utiliser la technique du cafard trouvé dans l'assiette.

Utiliser Hermes

Pour produire du code natif, RN utilise un moteur JavaScript. Hermes est un moteur optimisé pour RN présenté par Facebook en 2019. Toutefois, il reste facultatif et requiert une activation manuelle pour être utilisé, au besoin et pour des raisons de compatibilité avec certaines librairies. Vous pouvez en savoir plus ici.

Pour Android

  • Modifier le fichier android/app/build.gradle

Enabling Hermes.png

  • Dans le repertoire android/ taper la commande ./gradlew clean

Pour iOS

  • Modifier le fichier ios/Podfile

Enabling Hermes iOS.png

  • Dans le repertoire ios/ taper la commande pod install

Ceci vous fera gagner sur tous les plans, de la durée du démarrage jusqu'à la taille de l'application.

Activer Proguard (Android uniquement)

Proguard est un outil qui peut réduire légèrement la taille de l'APK. Pour ce faire, il supprime les parties du bytecode Java de React Native (et ses dépendances) que votre application n'utilise pas.

Modifier le fichier android/app/build.gradle

proguard.png

Utiliser le format webp pour les images non vectorielles

WebP est un format de fichier image créé par l’équipe Web de Google, développé pour remplacer les formats JPEG, PNG et GIF, tout en supportant la compression, la transparence et les animations.

Ce format peut réduire la taille de votre apk de plus de 30% de sa taille si vous utilisez beaucoup d'images dans votre code.

Vous pouvez convertir vos images sur convertio.co.

yarn add react-native-webp-format

cd ios && pod install

  • Dans le fichier android/app/build.gradle, ajouter le code suivant

webp_format.png

Voilà, c'est terminé !

N'hésitez à laisser vos questions ou remarques en commentaire. Merci !