Réduire les charges utiles JavaScript avec le fractionnement de code

Houssein Djirdeh

Jeremy Wagner

Personne n'aime attendre. Plus de 50% des utilisateurs quittent un site Web s'il met plus de trois secondes à se charger.

L'envoi de charges utiles JavaScript volumineuses a un impact important sur la vitesse de votre site. Au lieu d'envoyer tout le code JavaScript à l'utilisateur dès que la première page de votre application est chargée, divisez votre bundle en plusieurs parties et n'envoyez que ce qui est nécessaire au tout début.

Pourquoi le fractionnement du code est-il bénéfique ?

Le fractionnement du code est une technique qui vise à réduire le temps de démarrage. En envoyant moins de code JavaScript au démarrage, nous pouvons accélérer l'interactivité des applications en réduisant la charge de travail du thread principal pendant cette période critique.

En ce qui concerne les Core Web Vitals, réduire les charges utiles JavaScript téléchargées au démarrage contribue à améliorer les temps d'interaction à la prochaine peinture (INP). En libérant le thread principal, l'application peut répondre plus rapidement aux entrées utilisateur en réduisant les coûts de démarrage liés à l'analyse, à la compilation et à l'exécution JavaScript.

En fonction de l'architecture de votre site Web, en particulier s'il repose fortement sur le rendu côté client, réduire la taille des charges utiles JavaScript chargées de l'affichage du balisage peut améliorer les temps de LCP (Largest Contentful Paint). Cela peut se produire lorsque la ressource LCP est détectée tardivement par le navigateur après la fin du balisage côté client, ou lorsque le thread principal est trop occupé pour afficher cet élément LCP. Dans les deux cas, le temps LCP de la page peut être retardé.

Mesurer

Lighthouse affiche un audit échoué lorsqu'il faut un temps considérable pour exécuter tout le code JavaScript d'une page.

Divisez le bundle JavaScript pour n'envoyer que le code nécessaire au parcours initial lorsque l'utilisateur charge une application. Cela réduit la quantité de script à analyser et compiler, ce qui accélère le chargement des pages.

Les bundlers de modules populaires tels que webpack, Parcel et Rollup vous permettent de diviser vos bundles à l'aide d'importations dynamiques. Prenons l'exemple de l'extrait de code suivant, qui illustre une méthode someFunction déclenchée lorsqu'un formulaire est envoyé.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

Ici, someFunction utilise un module importé à partir d'une bibliothèque particulière. Si ce module n'est pas utilisé ailleurs, le bloc de code peut être modifié pour utiliser une importation dynamique afin de ne l'extraire que lorsque l'utilisateur envoie le formulaire.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

Le code qui compose le module n'est pas inclus dans le bundle initial et est désormais chargé de manière différée, ou fourni à l'utilisateur uniquement lorsqu'il est nécessaire après l'envoi du formulaire. Pour améliorer davantage les performances des pages, préchargez les blocs critiques pour les hiérarchiser et les extraire plus tôt.

Bien que l'extrait de code précédent soit un exemple simple, le chargement paresseux des dépendances tierces n'est pas un modèle courant dans les applications plus importantes. En règle générale, les dépendances tierces sont divisées en un lot de fournisseurs distinct qui peut être mis en cache, car elles ne sont pas mises à jour aussi souvent. Pour en savoir plus sur la façon dont le SplitChunksPlugin peut vous aider, consultez

La répartition au niveau du routage ou du composant lorsque vous utilisez un framework côté client est une approche plus simple pour le chargement paresseux de différentes parties de votre application. De nombreux frameworks populaires qui utilisent webpack fournissent des abstractions pour faciliter le chargement paresseux plutôt que de vous plonger dans les configurations vous-même.