Votre application React est trop lente ou prend trop de temps à se charger? Si tel est le cas, vous pouvez utiliser une technique connue sous le nom de fractionnement de code. Cette technique est très efficace pour améliorer la vitesse de chargement et les performances des applications React. Mais qu'est-ce que le fractionnement de code? Et comment est-ce fait ?

Qu'est-ce que le fractionnement de code?

Une application React typique comprend des dizaines de composants (et de code). Mais vous n'avez pas besoin de charger la plupart de ces composants lorsque vous les chargez pour la première fois. Le fractionnement du code consiste à diviser les différentes parties de votre application et à ne les charger qu'en cas de besoin. C'est beaucoup plus efficace que de charger l'intégralité de l'application en une seule fois.

Considérez une application React qui a trois pages: la page d'accueil, la page à propos et la page des produits. Lorsque vous êtes sur la page d'accueil, il est inutile de charger la page à propos ou la page des produits. Parce que vous n'êtes pas encore sur ces pages. L'idée du fractionnement de code est de s'assurer que vous ne chargez le code que lorsque cela est nécessaire.

Ouvrez une page Web sur votre navigateur Web, puis ouvrez les DevTools (vous pouvez cliquer sur F12 sur votre clavier pour l'ouvrir sur Google Chrome). Ensuite, allez dans l'onglet Source. Vous y trouverez tout le code téléchargé lorsque vous accédez à la page. Sans fractionnement de code, le navigateur télécharge tous les fichiers de votre projet lors du chargement initial de la page. Cela peut ralentir votre site Web s'il contient beaucoup de fichiers.

La division du code devient particulièrement utile lorsque votre projet commence à devenir de plus en plus grand. En effet, le téléchargement simultané de tous les fichiers de l'application peut prendre beaucoup de temps. Donc, diviser cela va être très bénéfique.

La meilleure partie du fractionnement du code est que vous pouvez retarder le chargement des composants ainsi que des fonctions. Notre guide d'introduction sur ReactJS explique les composants et les fonctions en profondeur au cas où vous auriez besoin d'un rappel.

Fonctions de fractionnement de code: utilisation de l'importation dynamique

Considérez la situation suivante. Vous voulez que votre page d'accueil ait un bouton. Lorsque vous cliquez sur le bouton, vous voulez alerter la somme de 2 et 2 (qui est 4). Vous créez donc un Accueil.js composant et définissez la vue de votre page d'accueil.

Dans ce cas, vous avez deux options. Tout d'abord, vous pouvez importer le code pour ajouter les chiffres en haut de la Accueil.js déposer. Mais voici le problème. Si vous deviez importer la fonction en haut du fichier, le code se chargera même si vous n'avez pas cliqué sur le bouton. Une meilleure approche consistera à charger le somme() fonctionner uniquement lorsque vous cliquez sur le bouton.

Pour ce faire, vous devrez effectuer une importation dynamique. Cela signifie que vous allez importer le somme() fonction en ligne dans l'élément bouton. Voici le code pour le même :

exporterdéfautfonctionMaison() { 
retour ( 
"Maison"> 
Page d'accueil</h1>
 {
importer("../somme.js").alors((module) => {
 alerte(module.somme(2, 2))
 })
 }}
 >
 Additionner les deux nombres
 </button> 
 </div> 
 ); 
}

Maintenant, le navigateur ne téléchargera que le somme.js module lorsque vous cliquez sur le bouton. Cela améliore le temps de chargement de la page d'accueil.

Composants de fractionnement de code: utilisation de React.lazy et Suspense

Vous pouvez diviser les composants dans React en utilisant le paresseux() fonction. Le meilleur endroit pour effectuer le fractionnement de code serait à l'intérieur de votre routeur. Parce que c'est là que vous mappez les composants aux routes de votre application. Vous pouvez lire notre guide sur comment créer une application d'une seule page avec React Router si vous avez besoin d'un rafraîchissement.

Supposons que votre application dispose d'un Maison, À propos, et Des produits composant. Quand tu es au Maison composant, il est inutile de charger le À propos composant ou le Des produits composant. Vous devez donc les séparer du Maison itinéraire. Le code suivant montre comment y parvenir :

Tout d'abord, vous devez importer les fonctions et composants requis à partir du réagir et réagir-routeur-dom modules:

importer { Itinéraires, itinéraire, point de vente, lien } depuis"réagir-routeur-dom";
importer { paresseux, Suspense } depuis"réagir";

Ensuite, vous devez importer dynamiquement les composants en utilisant le paresseux() fonction:

constante Maison = paresseux(() =>importer("./composants/Accueil"));
constante A propos = paresseux(() =>importer("./composants/À propos"));
constante Produits = paresseux(() =>importer("./composants/Produits"));

Configurez ensuite la mise en page (menu de navigation). Utilisez le composant pour restituer le composant qui correspond à la route actuelle (Maison, À propos, ou Des produits composant):

fonctionNavWrapper() {
retour (
 <>

Vous pouvez voir que nous emballons les composants à l'intérieur. Cela indique à React que tout à l'intérieur a le potentiel d'être chargé paresseusement, ce qui signifie qu'il pourrait ne pas être disponible immédiatement. Pour cette raison, le Le suspense le composant a un se retirer propriété. Dans notre cas, la valeur est un simple texte qui dit "Chargement...". Ainsi, pendant que chacune des pages est en cours de téléchargement, cela va dire chargement à l'écran.

Enfin, configurez l'itinéraire :

exporterdéfautfonctionApplication() {
retour (

"/" élément={}>
"/" élément={} />
"/des produits" élément={} />
"/à propos de" élément={} />
 </Route>
 </Routes>
 );
}

Désormais, lorsque vous visitez la page d'accueil, le navigateur ne charge que le Accueil.js déposer. De la même manière, lorsque vous cliquez sur le À propos lien dans le menu de navigation pour visiter la page À propos, le navigateur charge uniquement le À propos.js déposer. C'est la même chose pour la page Produits.

Fractionnement de code conditionnel

Souvent, vous pouvez avoir du contenu sur votre page qui ne s'applique qu'à certains utilisateurs. Par exemple, sur votre page d'accueil, vous pouvez avoir une section avec des données d'administration réservées aux utilisateurs administrateurs. Il peut s'agir d'un tableau de bord d'administration qui s'affiche pour les utilisateurs administrateurs, mais pas pour les utilisateurs normaux.

Dans ce cas, vous ne voudriez pas afficher toutes ces données à chaque fois. Dans ce cas, vous pouvez utiliser la technique de fractionnement de code pour vous assurer de ne montrer ces informations que si cette personne est un administrateur.

Voici à quoi ressemblerait ce code :

importer { paresseux, Suspense } depuis"réagir";
constante AdminData = paresseux(() =>importer("./AdminData"));
exporterdéfautfonctionMaison() { 
constante [isAdmin, setIsAdmin] = useState(FAUX)
retour ( 

"Maison"> 
Page d'accueil</h1>
 setIsAdmin(précédent => !préc)}>
 Basculer l'administrateur
 </button> 

Chargement...</h1>}>
 {estAdmin? <AdminData />: <h2> Pas l'administrateur h2>} 
 </Suspense>
 </div> 
 ); 
}

Maintenant, lorsque vous cliquez sur le bouton bascule, estAdmin sera fixé à vrai. En conséquence, l'application affichera le qui est chargé paresseusement. Mais si vous n'êtes pas un utilisateur administrateur, l'application ne sera jamais téléchargée AdminData.js car il n'en aura pas besoin.

Le fractionnement de code conditionnel utilise le même concept que rendu conditionnel dans React.

Concepts avancés de fractionnement de code

Une technique avancée que vous pouvez activer lors du fractionnement du code est les transitions. Le useTransition() hook vous permet d'effectuer des mises à jour non urgentes qui ne modifieront pas votre interface utilisateur tant qu'elles n'auront pas terminé la mise à jour.

Tout d'abord, vous importez le hook :

importer {useTransition} depuis"réagir"

Ensuite, vous appelez le crochet, qui renvoie est en attente et startTransition:

constante [isPending, startTransition] = useTransition()

Enfin, enveloppez le code pour mettre à jour votre état à l'intérieur startTransition():

startTransition(() => {
 setIsAdmin((précédent) => !préc)
})

Désormais, votre interface utilisateur réelle n'affichera pas la valeur de secours (le texte de chargement) tant que le navigateur n'aura pas terminé la transition. Cela signifie qu'il va attendre que le navigateur télécharge toutes les données d'administration avant d'essayer d'afficher des données.

Autres façons d'optimiser les performances de React

Cet article a couvert le fractionnement de code comme méthode pour améliorer les performances de vos applications React. Mais il existe également plusieurs autres méthodes qui peuvent vous donner les connaissances nécessaires pour créer des applications robustes.