# 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](https://reactnative.dev/docs/hermes). 

#### Pour Android

- Modifier le fichier ```android/app/build.gradle```

![Enabling Hermes.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639700536229/7vBsqpO9P.png)


- Dans le repertoire ```android/``` taper la commande ```./gradlew clean```


#### Pour iOS

- Modifier le fichier ```ios/Podfile```

![Enabling Hermes iOS.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639700638444/mLW599fj-.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1639701326363/HuHVHuiye.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](https://convertio.co/fr/image-converter/). 


- Installer  [***react-native-webp-format***](https://www.npmjs.com/package/react-native-webp-format) 

```yarn add react-native-webp-format```

```cd ios && pod install```


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


![webp_format.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639703573959/fxs95jdmq.png)


Voilà, c'est terminé !



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