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 sur la vitesse de votre site de manière significative. Au lieu d'envoyer tout le code JavaScript à l'internaute dès que la première page de votre application est chargée, divisez votre bundle en plusieurs pièces et n’envoyez que le nécessaire au tout début.

Quel est l'intérêt du fractionnement du code ?

Le fractionnement du code est une technique qui vise à réduire le temps de démarrage. En fournissant moins de code JavaScript au démarrage, nous pouvons rendre les applications interactifs 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 d'interaction avec Next Paint (INP). En effet, 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 si votre site Web repose fortement sur le rendu côté client, la réduction de la taille des charges utiles JavaScript responsables du balisage du rendu peut permettre d'améliorer les temps Largest Contentful Paint (LCP). Cela peut se produire lorsque le navigateur retient la détection de la ressource LCP jusqu'à ce que le balisage côté client soit terminé, ou lorsque le thread principal est trop occupé pour afficher cet élément LCP. Les deux scénarios peuvent retarder le LCP de la page.

Mesurer

Lighthouse affiche un échec d'audit lorsqu'un délai important exécuter tout le code JavaScript sur une page.

Divisez le groupe JavaScript pour n'envoyer que le code nécessaire à la route initiale lorsque le charge une application. Cela réduit la quantité de script à traiter analysées et compilées, ce qui accélère le chargement des pages.

Outils de bundle populaires pour les modules, comme webpack, Parcel (Colis) Les groupes vous permettent de diviser vos à l'aide d'importations dynamiques. Prenons l'exemple de l'extrait de code suivant, qui montre un exemple someFunction qui est déclenchée lors de l'envoi d'un formulaire.

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 spécifique. Si ce module n'est pas utilisé ailleurs, le bloc de code peut être modifié pour utiliser un une importation dynamique pour 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 sont désormais chargées en différé, ou fournies à l'utilisateur uniquement si cela est nécessaire après l'envoi du formulaire. Pour améliorer davantage les performances des pages, préchargez les fragments critiques pour les hiérarchiser et les récupérer plus rapidement.

Bien que l'extrait de code précédent soit un exemple simple, un service tiers de chargement différé les dépendances n'est pas un modèle courant dans les grandes applications. Habituellement, trois les dépendances entre les parties sont divisées en un groupe de fournisseurs distinct qui peut être mis en cache puisqu'elles ne sont pas mises à jour aussi souvent. Pour en savoir plus sur l'utilisation Le plug-in SplitChunksPlugin permet vous aider à y parvenir.

La division au niveau de la route ou du composant lors de l'utilisation d'un framework côté client est une approche plus simple du chargement différé de différentes parties de votre application. Beaucoup les frameworks populaires qui utilisent Webpack fournissent des abstractions permettant le chargement différé plus facile que de plonger vous-même dans les configurations.