Maîtriser le fractionnement du code : débloquer des temps de chargement plus rapides pour vos applications JavaScript

À mesure que les applications Web se développent, la taille des bundles JavaScript peut devenir un facteur important dans les performances de vos applications. Les gros bundles peuvent entraîner des temps de chargement plus lents, et à mesure que les bundles grossissent, les temps de chargement augmentent. Heureusement, il existe une technique appelée fractionnement de code qui permet de résoudre ce problème. Voyons de quoi il s'agit et comment vous pouvez le mettre en œuvre dans votre projet.

Qu’est-ce que le fractionnement de code ?

Le fractionnement du code vous permet de diviser votre bundle JavaScript en morceaux plus petits qui peuvent ensuite être chargés à la demande. Au lieu de charger une application entière en même temps, vous chargez uniquement le code nécessaire à l'interaction utilisateur en cours et différez le chargement de l'autre code jusqu'à ce qu'il soit réellement nécessaire. Cela peut considérablement améliorer les temps de chargement.

Pourquoi est-ce important ?

Soyons réalistes, nous avons tous été là lorsque nous essayions de charger quelque chose, cela prend trop de temps et nous sortons. Un temps de chargement plus rapide se traduit directement par une meilleure expérience utilisateur. Le fractionnement du code permet de maintenir l'engagement des utilisateurs en offrant une expérience réactive et réactive. Lorsque vos utilisateurs sont engagés, ils sont plus susceptibles de rester sur votre site, d'explorer son contenu et de consulter vos services.

Imaginez maintenant que vous ayez une grande application où tout le code est regroupé dans un seul fichier. Chaque fois que cette application est utilisée, l'intégralité du bundle est chargée, même si seule une fraction des fonctionnalités est utilisée à ce moment-là. Ceci est très inefficace et ralentira votre application. En implémentant le fractionnement du code, vous réduisez la taille initiale du bundle, ce qui entraîne un chargement plus rapide. Seul le code utilisé à ce moment-là est extrait tandis que le reste attend d'être appelé.

Comment fonctionne le fractionnement de code ?

De la même manière que les outils de regroupement tels que Webpack ou Rollup implémentent le tremblement d'arborescence, ils regroupent également vos fichiers JavaScript dans un ou plusieurs fichiers de sortie, souvent appelés « morceaux ». Ces morceaux peuvent ensuite être chargés selon les besoins, c'est là que le fractionnement du code entre en jeu. Ci-dessous, nous passerons en revue la mise en œuvre du fractionnement de code avec des importations dynamiques et un fractionnement basé sur l'itinéraire.

Importations dynamiques

L'un des moyens les plus simples d'implémenter le fractionnement du code consiste à utiliser des instructions import() dynamiques. Contrairement aux importations statiques, les importations dynamiques vous permettent de charger un module uniquement lorsque cela est nécessaire. Voici un exemple :

import('./module').then(module => { module.doSomething(); })

Dans ce cas, module.js n'est chargé que lorsque l'instruction d'importation est exécutée, pas lors du chargement initial de l'application. Cela vous permet de différer le chargement du code jusqu'à ce qu'il soit réellement nécessaire.

Fractionnement basé sur l'itinéraire

Pour les applications monopages (SPA), le fractionnement du code basé sur le routage est une excellente approche. Cela vous permet de charger différents morceaux de code en fonction de l'itinéraire vers lequel l'utilisateur navigue. Dans une application React, cela est très simple à faire en utilisant React.lazy et React.Suspense. Voici un exemple :

const Home = React.lazy(() => import(‘./Home’)); const About = React.lazy(() => import(‘./About’)); function App() { return (  Loading…