Comme mentionné précédemment, il est nécessaire d'importer les composants qui seront affichés lorsque l'utilisateur navigue vers des chemins spécifiques dans notre application. Pour cela, la fonction lazy de la bibliothèque React sera utilisée.

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

import { lazy } from 'react';

const View = lazy(() => import('./View.js'));

Voici le rôle de chaque partie de cette syntaxe :

• Ligne 1 : Importe la fonction lazy depuis 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 cet exemple) en utilisant la fonction lazy. La fonction lazy prend en argument une fonction qui 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) à l'aide du mot-clé import. En enveloppant l'instruction d'importation avec lazy, le chargement paresseux du composant View.js est activé.

Exemple

Ce concept sera appliqué à 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 la tâche actuelle consiste à les utiliser dans notre système de routage :

import { lazy } from "react";

const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));

La fonction lazy de la bibliothèque React est utilisée pour importer les composants correspondant aux différentes vues. Chaque composant est importé dynamiquement à l'aide de l'instruction import, et les chemins relatifs vers les fichiers des composants sont spécifiés (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

En important ces composants avec le chargement paresseux, leur chargement n'a lieu que lorsqu'ils sont nécessaires, ce qui contribue à une expérience utilisateur plus efficace et réactive.