Fractionnement du code avec des importations dynamiques dans Next.js

Découvrez comment accélérer votre application Next.js grâce aux stratégies de fractionnement du code et de chargement intelligent.

Milica Mihajlija

Qu'allez-vous apprendre ?

Cet article décrit les différents types de code fractionnement et comment utiliser des importations dynamiques pour accélérer vos applications Next.js.

Répartition du code basée sur des routes et sur des composants

Par défaut, Next.js divise votre code JavaScript en fragments distincts pour chaque route. Lorsque les utilisateurs chargent votre application, Next.js n'envoie que le code nécessaire pour la route initiale. Lorsque les utilisateurs parcourent l'application, ils récupèrent les fragments associées aux autres routes. La division du code basée sur le routage réduit le risque de script qui doit être analysé et compilé en même temps, ce qui donne le temps de chargement des pages est plus rapide.

Bien que la répartition du code basée sur le routage soit une bonne option par défaut, vous pouvez optimiser davantage avec le fractionnement du code au niveau du composant. Si vous avez de grandes les composants de votre application, il est judicieux de les diviser en morceaux distincts. Ainsi, tous les composants volumineux qui ne sont pas essentiels ou ne s'affichent que sur certains les interactions des utilisateurs (comme un clic sur un bouton) peuvent être chargées de manière différée.

Next.js est compatible avec les import() dynamiques, qui vous permet d'importer des modules JavaScript (y compris des composants React) de manière dynamique et de charger chaque importation comme un fragment distinct. Cela vous donne le fractionnement du code au niveau du composant et vous permet de contrôler le chargement des ressources que les utilisateurs ne téléchargent que le code dont ils ont besoin pour la partie du site qu'il consulte. Dans Next.js, ces composants sont affichés côté serveur (SSR) par défaut.

Les importations dynamiques en action

Cet article présente plusieurs versions d'une application exemple qui se compose d'un simple avec un seul bouton. En cliquant sur le bouton, vous apercevez un chiot mignon. En tant que à chaque version de l'application, vous verrez que les importations dynamiques différente de statique des importations et comment travailler avec elles.

Dans la première version de l'application, le chiot vit dans components/Puppy.js. À le chiot sur la page, l'application importe le composant Puppy dans index.js par une instruction d'importation statique:

import Puppy from "../components/Puppy";

Pour voir comment Next.js regroupe l'application, inspectez la trace réseau dans les outils de développement:

1. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.

3. Cliquez sur l'onglet Réseau.

4. Cochez la case Disable cache (Désactiver le cache).

5. Actualisez la page.

Lorsque vous chargez la page, tout le code nécessaire, y compris Puppy.js est intégrée dans index.js:

Lorsque vous appuyez sur le bouton Click me (Cliquer ici), seule la requête concernant le fichier JPEG de chiot est dans l'onglet Réseau:

L'inconvénient de cette approche est que même si les utilisateurs ne cliquent pas sur le bouton pour voir le chiot, ils doivent charger le composant Puppy, car il est inclus dans index.js Dans ce petit exemple, ce n'est pas un problème, mais dans la réalité, pour vos applications. C'est souvent une amélioration considérable de ne charger des composants volumineux que nécessaires.

Examinons maintenant une deuxième version de l'application, dans laquelle l'importation statique remplacé par une importation dynamique. Next.js inclut next/dynamic, ce qui en fait vous pouvez utiliser les importations dynamiques pour tous les composants dans Next:

import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";

// ...

const Puppy = dynamic(import("../components/Puppy"));

Suivez les étapes du premier exemple pour inspecter la trace réseau.

Lorsque vous chargez l'application pour la première fois, seule l'application index.js est téléchargée. Cette fois, c'est de 0,5 Ko (de 37,9 Ko à 37,4 Ko), n'inclut pas le code du composant Puppy:

Le composant Puppy se trouve maintenant dans un fragment distinct, 1.js, qui n'est chargé que lorsque vous appuyez sur le bouton:

Remarque : Par défaut, Next.js nomme ces fragments dynamiques number.js, où number commence à 1.

Dans les applications réelles, les composants sont souvent très plus grandes et les charger en différé peut réduire votre charge utile JavaScript initiale de centaines de kilo-octets.

Importations dynamiques avec indicateur de chargement personnalisé

Lorsque vous chargez des ressources en différé, il est recommandé de fournir un indicateur de chargement en cas de retard. Dans Next.js, vous pouvez le faire en fournissant argument supplémentaire de la fonction dynamic():

const Puppy = dynamic(() => import("../components/Puppy"), {
  loading: () => <p>Loading...</p>
});

Pour voir l'indicateur de chargement en action, simulez une connexion réseau lente dans Outils de développement:

1. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.

3. Cliquez sur l'onglet Réseau.

4. Cochez la case Disable cache (Désactiver le cache).

5. Dans la liste déroulante Limitation, sélectionnez 3G rapide.

6. Appuyez sur le bouton Click me (Cliquer sur moi).

Lorsque vous cliquez sur le bouton, le chargement du composant et de l'application prend un certain temps le message "Chargement en cours..." message entre-temps.

Importations dynamiques sans rendu côté serveur

Si vous devez afficher un composant uniquement côté client (par exemple, une application de chat widget), vous pouvez le faire en définissant l'option ssr sur false:

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

Conclusion

Grâce à la prise en charge des importations dynamiques, Next.js vous fournit du code au niveau du composant ce qui permet de réduire les charges utiles JavaScript et d'améliorer le temps de chargement. Tous les composants sont affichés par défaut côté serveur. Vous pouvez désactivez cette option chaque fois que nécessaire.