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 éléments 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. Lorsque nous fournissons moins de 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, réduire les charges utiles JavaScript téléchargées au démarrage contribue à améliorer les temps d'interaction à la prochaine peinture. 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 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 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 afin de les hiérarchiser et de 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 groupe 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 charger de manière différée 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 plonger vous-même dans les configurations.