Table of Contents

Pourquoi la taille de l'application importe pour réagir les applications autochtones

Les études montrent qu'une augmentation de 10 Mo de la taille de l'APK peut réduire la conversion de téléchargement de 1% ou plus. Sur Android, le Play Store affiche la taille de l'application de façon proéminente, et sur iOS, les utilisateurs doivent souvent attendre de gros téléchargements sur les réseaux cellulaires. Les petites applications bénéficient également d'installation plus rapide, d'une consommation de stockage moins élevée et de frais de données réduits, en particulier dans les marchés émergents où la bande passante est limitée.

Comprendre les artéfacts de construction autochtones réagissent

Avant d'appliquer des stratégies d'optimisation, il est essentiel de comprendre ce qui constitue la taille finale de l'application.

  • JavaScript bundle — l'ensemble de la logique d'application, y compris les bibliothèques tierces et React lui-même, compilé dans un seul fichier JS par Metro.
  • Native code binaires[ — compilé C++/Objective-C/Java/Kotlin code pour chaque architecture (armeabi-v7a, arm64-v8a, x86, x86 64 sur Android; arm64, x86 64 sur iOS).
  • Asset resources — images, polices, audio, vidéo et fichiers JSON stockés dans des fichiers res/drawable (Android) ou les ressources de paquets (iOS).
  • Supporter les bibliothèques[ — Réagir Native elle-même, plus tous les modules natifs (p. ex., réact-native-camera, réact-native-maps) qui ajoutent du code et des ressources compilés.
  • Métadonnées — fichiers de manifeste, icônes, écrans de lancement, storyboards et entrées Info.plist.

Chaque couche contribue différemment. Sur Android, le paquet JavaScript est intégré dans l'APK/AAB. Sur iOS, le paquet JS vit dans le paquet app aux côtés des exécutables natifs. Savoir d'où vient le poids vous permet de cibler des optimisations précisément.

Optimiser les actifs — au-delà de la compression de base

L'optimisation des actifs est le fruit le plus bas, mais de nombreuses équipes s'arrêtent à la simple compression. Une approche plus profonde permet de réaliser des économies plus importantes.

Utiliser des formats d'images modernes

Pour Android, le système de construction React Native convertit automatiquement les PNG en WebP si vous les placez dans le dossier et activez dans . Sur iOS, utilisez les catalogues d'actifs pour stocker des images; Xcode peut alors choisir le meilleur format (HEIC avec rechute vers JPEG) à l'exécution. Pour les images multiplateformes récupérées depuis un CDN, servez WebP avec rechute PNG/JPEG en utilisant le composant .

Redimensionner et compresser au moment de la construction

Utilisez des outils comme ou un script de construction qui réduit les images à la taille maximale requise de l'affichage. Par exemple, une icône affichée à 48px ne devrait pas être de 1920px large. Combinez le redimensionnement avec une compression sans perte ou perte en utilisant , ou des services en ligne. Intégrez la compression dans votre pipeline CI afin que chaque demande de tirage impose un budget de taille.

Éliminer les actifs inutilisés

Au fil du temps, les projets accumulent des images, des captures d'écran et des animations. Lancez un outil d'analyse statique comme (ou un script personnalisé) pour indiquer des actifs non référencés dans , ou des instructions. Supprimez-les ou déplacez-les hors du répertoire de paquets.

Polices de sous-ensemble

Si votre application ne prend en charge que des caractères latins (ou un sous-ensemble), utilisez un outil de sous-ensemble de police comme ou pour enlever des caractères inutilisés. Cela peut réduire un fichier de police de 200 KB à 20 KB. Pour les applications internationalisées, considérez le chargement dynamique de polices — ne récupérer que le sous-ensemble spécifique à la locale à l'exécution.

Le fractionnement et le chargement paresseux — Une approche systématique

React Native , le package Metro prend en charge la division du paquet JavaScript en plusieurs morceaux qui peuvent être chargés sur demande. Cette technique, souvent appelée - fractionnement de code, réduit le téléchargement initial et l'analyse du temps.

Comment le fractionnement du code fonctionne dans les réagissez native

Par défaut, Metro produit un seul paquet JS. Pour le fractionnement, vous devez configurer Metro avec une approche de sérialisation personnalisée (par exemple, en utilisant ou . Vous pouvez aussi utiliser React.lazy et Suspense pour importer dynamiquement des composants au moment de l'exécution. Cependant, les vrais paquets asynchrones nécessitent un mécanisme de chargement côté serveur ou des paquets intégrés. La solution la plus courante pour la production est de diviser votre application en un paquet -main (écrans de base et navigation) et -secondaire pour les fonctionnalités moins fréquemment utilisées (par exemple, paramètres, aide, embarquement).

Mise en œuvre de la charge paresseuse

Même sans partage de code complet, vous pouvez charger des composants paresseux en utilisant React.lazy:

const SettingsScreen = React.lazy(() => import('./Screens/SettingsScreen'));

Enveloppez le composant paresseux dans une limite avec une interface utilisateur de repli. Ce modèle reporte l'importation du module jusqu'au premier rendu, réduisant ainsi la taille du paquet initial. Cependant, notez que React.lazy ne crée pas à elle seule des fichiers physiques distincts — le code du composant est toujours groupé dans le JS principal.

Stratégies de précharge

Pour les fonctions critiques de mission, vous pouvez précharger les paquets de morceaux en arrière-plan après le lancement de l'application. Utilisez des bibliothèques comme pour servir localement des morceaux, ou les intégrer comme actifs. Sur iOS, vous pouvez utiliser l'API pour les ressources à la demande. La clé est d'équilibrer la taille initiale avec les performances perçues : charger uniquement ce dont l'utilisateur a besoin immédiatement, puis récupérer le reste sans heurt.

Gagnez ProGuard et R8 pour Android

Les constructions Android bénéficient fortement des outils de rétrécissement et d'obfuscation de code.

ProGuard c. R8

ProGuard est l'outil traditionnel; R8 est Google , qui fonctionne par défaut dans Android Gradle Plugin 3.4.0 et plus haut. R8 est plus rapide et plus agressif dans la suppression de code mort. Pour activer R8, assurez-vous que votre contient:

android.enableR8=true

Et dans , définissez et pour inclure les règles ProGuard par défaut. R8 rétrécira, obfusquera et optimisera le code Java/Kotlin et le code Natif C++ de React si vous utilisez Hermes.

Règles ProGuard personnalisées pour réagir native

Réagir Native compte sur la réflexion et les appels JNI qui peuvent être brisés par une obfuscation agressive. Vous devez garder certaines classes et méthodes. Utilisez les règles suivantes dans votre :

-keep class com.facebook.react.** { *; }
-keep class com.facebook.hermes.** { *; }
-keepclassmembers class * {
 @com.facebook.react.uimanager.annotations.ReactProp ;
}

Gardez également les classes utilisées par les modules natifs (p. ex. ). Testez soigneusement votre production de construction — une règle manquante peut provoquer des accidents d'exécution.

Hermès et taille de la boîte

Si vous utilisez Hermes (React Native ès JavaScript engine), le faisceau JS est précompilé en octécode, qui est généralement 20-30% plus petit que la source JS brute. Activez Hermes dans votre et (pour Android) ou Podfile (pour iOS). Hermes réduit également l'utilisation de la mémoire et le temps de démarrage.

Supprimer les dépendances et bibliothèques non utilisées

Dependency bloat se faufile facilement. De nombreux développeurs ajoutent des bibliothèques pour une seule fonctionnalité, puis ne les supprime jamais.

Vérification de vos dépendances

Utilisez pour lister les paquets installés mais jamais importés. Cependant, cet outil ne vérifie que les importations directes dans votre code JS. Pour les modules natifs, vous devez examiner manuellement et iOS Podfile pour les Pods inutilisés. De plus, inspectez pour les dépendances transitoires qui tirent dans les bibliothèques lourdes (p. ex., un petit utilitaire qui dépend ].

Remplacer les bibliothèques lourdes par des bibliothèques plus légères

Par exemple, remplacer (70 KB minifié) par (tree-shakeable, ~8 KB) ou l'API intégrée . Échanger des kits d'interface utilisateur à caractéristiques complètes avec des ensembles de composants minimes. Utilisez les fonctionnalités natives de la plate-forme lorsque possible : peut être remplacé par un WebView qui charge un visionneur PDF.js, réduisant la taille binaire native.

Supprimer les dépendances en matière de test et de développement de la production

Assurez-vous que les paquets comme , et les outils de débogage sont exclus de la construction de la version. Utilisez des drapeaux de construction pour les importer sous condition seulement dans le développement.

Optimiser le bloc JavaScript

Le faisceau JS est souvent le plus grand morceau de l'application — parfois 2-10 Mo non comprimé.

Minification et élimination du Code Mort

Les paquets de métro utilisent déjà UglifyJS ou Terser en mode production. Mais vous pouvez réduire encore la taille en permettant au plugin Babel de supprimer les instructions . Utilisez également les cibles pour éviter les fonctions de transpilage qui sont supportées nativement par la version cible Android/iOS (par exemple, fonctions flèche, async/await).

Shaking d'arbre

Les tremblements d'arbres (élimination du code mort) dans React Native sont limités parce que Metro ne supporte pas entièrement les modules ES. Cependant, vous pouvez améliorer les résultats en importeant uniquement des modules spécifiques d'une bibliothèque plutôt que de la bibliothèque entière.

// Bad: imports the entire lodash bundle
import _ from 'lodash';
// Good: imports only the pick function (~5 KB)
import pick from 'lodash/pick';

Utilisez la avec la règle pour faire respecter les importations granulaires.

Séparer les ensembles

Comme mentionné dans la division de code, vous pouvez diviser le paquet en plusieurs fichiers. Un modèle éprouvé est de créer un paquet -core--contenant React, React Native et navigation, et un paquet -business--container avec vos écrans d'application. Cela permet aux utilisateurs de mettre à jour seulement la logique d'affaires (plus petits téléchargements) et profite de la mise en cache HTTP si servi depuis un serveur.

Analyser la composition des ensembles

Utilisez pour générer une arborescence interactive de votre paquet JS. Cela révèle quelles bibliothèques consomment le plus d'espace. Par exemple, vous pouvez trouver qu'une bibliothèque de localisation ajoute 500 KB, qui pourrait être remplacé par une approche JSON plus simple à valeur clé.

Techniques de réduction de la taille de la plate-forme

iOS : App Rincement et Bitcode

L'amincissement de l'application crée des variantes d'application spécifiques à l'appareil afin que les utilisateurs ne téléchargent que ce dont ils ont besoin. Activer Bitcode[ dans Xcode (Configuration de construction -> Activer Bitcode -> Oui). Bitcode permet à Apple de ré-optimiser et de supprimer le code inutilisé pendant la soumission, réduisant la taille de téléchargement.

Pour encore plus d'économies, activez Ressources sur demande (ODR)[ pour des actifs comme des vidéos d'introduction ou des niveaux de jeu haute résolution. ODR vous permet de marquer des ressources et de les télécharger seulement lorsque nécessaire, réduisant directement la taille du paquet initial App Store.

Android: Ensemble d'applications (AAB) et de partage des APK

Passer d'APK à Android App Bundle (AAB) pour la distribution. AAB génère des APK fractionnés par densité, langue et architecture. Cela peut réduire la taille de téléchargement de 30-50% parce que les utilisateurs n'obtiennent que le code et les ressources pour leur appareil spécifique. Dans , assurez .

En outre, utilisez Android Dynamic Delivery pour moduler les fonctionnalités : installer le module de base et télécharger les modules de fonctionnalités à la demande (similaire à iOS ODR).

Modules natifs : Optez pour Hermes et TurboModules

Remplacer le moteur JavaScriptCore par Hermes sur les deux plateformes. Hermes compile JS pour octecoder à l'avance, réduisant la taille du paquet et le coût de démarrage. Pour les versions Natives React (0.71+), activez Nouvelle architecture avec TurboModules. TurboModules permettent de charger les modules natifs paresseuse, ce qui signifie que leur code natif n'est pas lié tant que le module JS n'est pas utilisé.

Surveillance et optimisation continue

L'optimisation de la taille n'est pas une tâche ponctuelle. Intégrez-la dans votre workflow de développement.

Définir les budgets de taille

Définir une taille maximale APK/AAB (p. ex. 40 Mo pour l'installation initiale) et l'appliquer pendant l'IC. Utilisez des outils comme ou des scripts personnalisés qui comparent la nouvelle taille de construction à une base de référence. Si la taille augmente au-delà d'un seuil, la construction échoue et l'équipe enquête.

Impact de la taille de la piste dans les demandes de tirage

Commenter automatiquement le delta en format JS, en format binaire natif et en taille totale de l'actif. Des services comme peuvent suggérer des solutions de rechange plus légères.

Nettoyage régulier de la dépendance

Définir une vérification trimestrielle de dépendance. Supprimer les paquets inutilisés, mettre à jour les versions plus récentes qui peuvent avoir rétréci, et remplacer les bibliothèques monolithiques par des micro-bibliothèques. Des outils comme peuvent aider à identifier les paquets inutilisés.

Ressources externes pour la lecture supplémentaire

Conclusion

Reducing app size in React Native projects demands a multi-layered strategy that addresses assets, JavaScript bundle, native code, and dependency management. By adopting modern image formats, enabling Hermes and R8, splitting code and resources, and continuously monitoring size in CI, you can deliver apps that are fast to download, light on storage, and respectful of users’ data plans. The investment in size optimization pays off in higher conversion rates, better ratings, and lower churn — especially in global markets where every kilobyte matters. Start with an audit of your current build, prioritize the largest offenders, and iterate. Your users will thank you with every update they install.