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 significatif sur la vitesse de votre site. Au lieu d'envoyer tout le code JavaScript à l'utilisateur dès le chargement de la première page de votre application, divisez votre bundle en plusieurs parties et n'envoyez que ce qui est nécessaire au tout début.
Pourquoi la division du code est-elle bénéfique ?
La technique de division du code vise à réduire le temps de démarrage. Moins de code JavaScript est disponible au démarrage, plus les applications peuvent être interactives plus rapidement en minimisant le travail du thread principal pendant cette période critique.
En ce qui concerne Core Web Vitals, la réduction des charges utiles JavaScript téléchargées au démarrage contribuera à améliorer les délais de First Input Delay (FID) et Interaction to Next Paint (INP). Cela s'explique par le fait qu'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 si celui-ci s'appuie 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'augmenter le temps LCP (Largest Contentful Paint). Cela peut se produire lorsque la découverte de la ressource LCP est retardée par le navigateur jusqu'à la fin du balisage côté client, ou lorsque le thread principal est trop occupé pour afficher cet élément LCP. Ces deux scénarios peuvent retarder le LCP de la page.
Mesurer
Lighthouse affiche un échec d'audit lorsqu'un temps important est nécessaire pour exécuter tout le code JavaScript sur une page.
Divisez le bundle JavaScript pour n'envoyer que le code nécessaire à l'itinéraire initial lorsque l'utilisateur charge une application. Cela réduit la quantité de script à analyser et compiler, ce qui réduit le temps de chargement des pages.
Les bundles 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 montre un exemple de méthode 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 particulière. 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 le formulaire est envoyé par l'utilisateur.
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. Il 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 encore les performances des pages, préchargez les fragments critiques afin de les hiérarchiser et de les récupérer plus rapidement.
Bien que l'extrait de code précédent soit un exemple simple, les dépendances tierces à chargement différé 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 fournisseur distinct qui peut être mis en cache, car elles ne sont pas mises à jour aussi souvent. Vous pouvez en savoir plus sur la manière dont le plug-in SplitChunksPlugin peut vous aider.
La division au niveau de la route ou du composant lorsque vous utilisez un framework côté client est une approche plus simple du 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 d'avoir à examiner vous-même les configurations.