Importation de Composants avec Chargement Paresseux

Comme mentionné précédemment, nous devons importer les composants qui seront rendus lorsqu'un utilisateur navigue vers des chemins spécifiques dans notre application. Pour ce faire, nous allons utiliser la fonction lazy de la bibliothèque React.

La syntaxe pour utiliser la fonction lazy pour importer un composant est la suivante :

Voici ce que fait chaque partie de cette syntaxe :

• Ligne 1 : Importe la fonction lazy de la bibliothèque React. Cette fonction permet le découpage du code et le chargement paresseux des composants ;
• Ligne 3 : Déclare une variable (View dans ce cas) en utilisant la fonction lazy. La fonction lazy prend une fonction comme argument, et cette fonction retourne une instruction d'importation dynamique. L'instruction d'importation importe de manière asynchrone le fichier/module spécifié (dans ce cas, View.js) en utilisant le mot-clé import. En enveloppant l'instruction d'importation avec lazy, nous permettons le chargement paresseux du composant View.js.

Exemple

Appliquons ce concept à notre projet en important les composants pour différentes vues. Ces vues incluent la page d'accueil, la page à propos et la page de contacts. Il est important de noter que ces vues ont déjà été créées, et notre tâche actuelle est de les utiliser dans notre routage :

Nous utilisons la fonction lazy de la bibliothèque React pour importer les composants pour différentes vues. Chaque composant est importé dynamiquement en utilisant l'instruction import, et nous spécifions les chemins relatifs vers les fichiers des composants (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

En important ces composants avec le chargement paresseux, nous nous assurons qu'ils sont chargés uniquement lorsque cela est nécessaire, contribuant ainsi à une expérience utilisateur plus efficace et réactive.