Importations dynamiques pour les composants

Passons maintenant à un composant React qui n'est pas nécessaire lors du chargement initial de la page.

Les composants React peuvent également être importés de manière dynamique, mais dans ce cas, nous utilisons cette fonctionnalité conjointement avec next/dynamic pour nous assurer qu'il fonctionne comme n'importe quel autre composant React.

Nous allons utiliser cette méthode pour retarder le chargement de notre modal contenant l'exemple de code Hello World. Ce faisant, nous supprimons également deux bibliothèques tierces supplémentaires du chargement initial de la page.

Ouvrez le fichier pages/index.js et ajoutez une importation pour dynamic depuis next/dynamic au début du fichier :

import dynamic from 'next/dynamic';

Nous devrions également supprimer cette ligne :

import CodeSampleModal from '../components/CodeSampleModal';

Nous pouvons maintenant l'importer comme un composant dynamique en ajoutant ce qui suit au début du fichier :

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

CodeSampleModal sera le composant par défaut retourné par ../components/CodeSampleModal. Il fonctionne comme un composant React classique, et vous pouvez lui passer des props comme vous le feriez normalement.

Comme nous n'avons pas besoin de ce composant côté serveur, nous avons utilisé ssr: false pour le désactiver.

Ensuite, nous voulons différer le chargement de ce composant jusqu'à ce que l'utilisateur en ait besoin. Pour ce faire, nous pouvons encapsuler le composant dans une condition qui vérifie si la modal doit être ouverte, et si c'est le cas, elle sera chargée.

Encapsulez le composant CodeSampleModal comme suit :

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

Maintenant, lorsque isModalOpen passe à true pour la première fois, le JavaScript nécessaire sera demandé.

Avec ces optimisations, les métriques devraient maintenant paraître plus saines. Exécutons un nouveau rapport Lighthouse dans Chrome DevTools pour vérifier.

Il nous reste ces deux suggestions d'optimisation :

• Utiliser HTTP2 : pour résoudre ce problème, nous pouvons déployer sur une plateforme qui supporte HTTP2 (par exemple Vercel).
• Les éléments image n'ont pas de width et height explicites : Il s'agit en fait d'un bug dans lighthouse qui n'affecte pas les performances du site.

Pour aller plus loin

• Next.js : Documentation sur les importations dynamiques