Importations dynamiques

Dans cette leçon, nous allons réduire la quantité de JavaScript chargée lors du chargement initial de la page provenant de bibliothèques tierces.

Next.js prend en charge l'importation dynamique import() d'ES2020 pour JavaScript. Avec cette fonctionnalité, vous pouvez importer dynamiquement des modules JavaScript et travailler avec eux. Cela fonctionne également avec le rendu côté serveur (SSR).

Considérez les importations dynamiques comme une autre façon de diviser votre code en morceaux gérables.

Ouvrez le fichier pages/index.js et supprimez ces deux importations au début du fichier, car nous allons les importer dynamiquement plus bas dans le fichier.

import Fuse from 'fuse.js';
import _ from 'lodash';

Pour l'instant, nous voulons également supprimer :

const fuse = new Fuse(countries, {
  keys: ['name'],
  threshold: 0.3,
});

Maintenant que nous avons supprimé ce code, configurons le champ de recherche pour utiliser les bibliothèques importées dynamiquement.

Nous pouvons remplacer l'input par le code suivant :

<input
  type="text"
  placeholder="Rechercher un pays..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // Chargement dynamique des bibliothèques
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;
 
    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });
 
    const searchResult = fuse.search(value).map((result) => result.item);
 
    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);
 
    // Fausse requête d'analyse
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

En utilisant les importations dynamiques, cela résout le problème "Supprimer le JavaScript inutilisé" lors du chargement de la page. Cela améliore également notre Time to Interactive (TTI), ce qui contribue à améliorer le First Input Delay (FID).

Lançons un autre rapport Lighthouse dans Chrome DevTools pour voir nos progrès.

Pour aller plus loin

• Next.js : Documentation sur les importations dynamiques