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 considérable sur la vitesse de votre site. Au lieu d'envoyer tout le code JavaScript à votre 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 avantageux ?

Le fractionnement du code est une technique qui vise à minimiser le temps de démarrage. Lorsque nous fournissons moins de code JavaScript au démarrage, nous pouvons rendre les applications interactives plus rapidement en minimisant le travail du thread principal pendant cette période critique.

En ce qui concerne les Core Web Vitals, la réduction des charges utiles JavaScript téléchargées au démarrage contribuera à améliorer les temps Interaction to Next Paint (INP). L'idée est que, en libérant le thread principal, l'application est en mesure de 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 de JavaScript.

En fonction de l'architecture de votre site Web, en particulier s'il repose fortement sur le rendu côté client, la réduction de la taille des charges utiles JavaScript responsables du rendu du balisage peut améliorer les temps Largest Contentful Paint (LCP). Cela peut se produire lorsque la découverte de la ressource LCP par le navigateur est retardée jusqu'à 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 échec de l'audit lorsqu'il faut beaucoup de temps pour exécuter tout le code JavaScript d'une page.

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

Les bundlers de modules populaires comme webpack, Parcel et Rollup vous permettent de fractionner vos bundles à l'aide d'importations dynamiques. Par exemple, prenons l'extrait de code suivant qui montre un exemple de méthode someFunction qui se déclenche 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é d'une bibliothèque spécifique. Si ce module n'est pas utilisé ailleurs, le bloc de code peut être modifié pour utiliser une importation dynamique afin de le récupérer uniquement 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 constitue 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 en a besoin après l'envoi du formulaire. Pour améliorer encore les performances des pages, préchargez les blocs critiques pour les prioriser et les récupérer plus rapidement.

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

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