Découvrez comment accélérer votre application Next.js grâce aux stratégies de fractionnement du code et de chargement intelligent.
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:
Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran
Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Cochez la case Disable cache (Désactiver le cache).
Actualisez la page.
Lorsque vous chargez la page, tout le code nécessaire, y compris Puppy.js
est intégrée dans index.js
:
![Onglet DevTools Network affichant six fichiers JavaScript: index.js, app.js, webpack.js, main.js, 0.js et le fichier dll (bibliothèque de liens dynamiques).](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-tab-show-c3449cc648185.png?authuser=6&hl=fr)
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:
![DevTools Network après le clic sur le bouton, affichant les six mêmes fichiers JavaScript et une image.](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-tab-the-94b209c5e4e56.png?authuser=6&hl=fr)
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
:
![DevTools Network affiche les six mêmes fichiers JavaScript, mais index.js est désormais plus petit de 0,5 Ko.](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-showing-8cbd4309d29c5.png?authuser=6&hl=fr)
Le composant Puppy
se trouve maintenant dans un fragment distinct, 1.js
, qui n'est chargé que
lorsque vous appuyez sur le bouton:
![Onglet DevTools Network après le clic sur le bouton, affichant le fichier 1.js supplémentaire et l'image ajoutée au bas de la liste des fichiers.](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-tab-the-e42cc1846b47f.png?authuser=6&hl=fr)
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:
Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran
Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Cochez la case Disable cache (Désactiver le cache).
Dans la liste déroulante Limitation, sélectionnez 3G rapide.
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.
![Écran sombre avec le texte](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/a-dark-screen-the-text-914039a8f2589.png?authuser=6&hl=fr)
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.