Optimisations en React Native - Partie 2

L'optimisation des images dans les applications React Native est cruciale pour améliorer les performances et l'expérience utilisateur. Voici quelques conseils et techniques pour ajuster efficacement la taille des images : 1. **Utilisation de Formats d'Images Optimisés** : Optez pour des formats d'image modernes et efficaces comme WebP ( oui oui le WebP est pris en compte en React Native 🧐, mais il demande quelques ajustement niveau configuration, on en parle dans un autre article) ou JPEG 2000. Ces formats offrent un bon équilibre entre qualité et taille de fichier. 2. **Redimensionnement des Images** : Réduisez la taille physique des images. Il est inutile de charger une image de 4000x3000 pixels pour un affichage qui n'en nécessite que 800x600. Utilisez des outils de redimensionnement d'image côté serveur ou intégrez une étape de redimensionnement dans votre pipeline de déploiement. 3. **Compression Sans Perte** : Employez la compression sans perte pour réduire la taille des fichiers sans sacrifier la qualité. Des outils comme TinyPNG ou ImageOptim peuvent être utiles. 4. **Chargement Paresseux (Lazy Loading**, c’est quand même mieux en anglais**)** : Implémentez le chargement paresseux des images. Cela signifie que les images ne sont chargées que lorsqu'elles entrent dans le viewport de l'utilisateur. En React Native, vous pouvez utiliser des bibliothèques comme **`react-native-lazy-load-image`**. > 💡 petit tip: Encore une fois il faut prendre en compte que l’utilisation de librairies externes doit être correctement dosé. Il est important de ne pas ré-inventer la roue mais l’usage de dépendances externe est parfois préjudiciable pour le projet. > 5. **Cache des Images** : Mise en cache des images après leur premier téléchargement. Cela évite de recharger les mêmes images à chaque fois, économisant ainsi des ressources réseau et accélérant le temps de chargement. 6. **Utilisation de Thumbnails** : Pour les listes d'images, comme dans une galerie, utilisez des miniatures de petite taille qui peuvent être agrandies à la demande de l'utilisateur. 7. **Surveillance de la Performance** : Utilisez des outils comme Flipper ou React Native Performance pour surveiller l'impact de vos images sur les performances de l'application. En mettant en œuvre ces pratiques, vous pouvez considérablement améliorer les performances de votre application React Native, surtout en ce qui concerne le temps de chargement et la fluidité de l'interface utilisateur.

La mise en cache des images localement est une stratégie importante pour optimiser les performances des applications React Native. Des bibliothèques 📚 comme **`react-native-fast-image`** offrent des fonctionnalités de mise en cache avancées. **`FastImage`** remplace le composant d'image standard de React Native et gère le cache des images de manière plus efficace. Vous pouvez aussi déterminez la stratégie de cache adaptée à votre application. Vous pouvez choisir de mettre en cache jusqu'à un certain seuil de taille ou pendant une durée spécifique avant de rafraîchir le cache. Le stockage persistant sur l'appareil pour stocker les images est une autre solution. Des options comme AsyncStorage ou des bases de données locales comme Realm ou SQLite peuvent être utilisées pour stocker les métadonnées des images et leur chemin d'accès. Enfin, il faut surveillez et gérez la taille de votre cache pour éviter une utilisation excessive de l'espace de stockage sur l'appareil. Implémentez une logique pour purger les images les moins fréquemment utilisées du cache.