Qu'est-ce que le découpage de code ?

Le découpage de code décompose un bundle JavaScript monolithique en plus petits chunks chargés à la demande plutôt qu'en amont. Pour les boutiques composable-commerce, c'est le moyen le plus direct de réduire le first-party-JS expédié à la navigation initiale, ce qui améliore en retour l'INP, le coût d'hydratation et la réactivité globale.

Définition

Les bundlers modernes comme Vite, Webpack, Turbopack, Rollup et esbuild génèrent des chunks distincts selon les limites de route, les imports dynamiques ou les limites au niveau des composants. Des frameworks comme Next.js, Nuxt, Remix et SvelteKit découpent automatiquement par route et par layout, tandis que les développeurs ajoutent des découpages manuels avec import() pour des composants lourds comme un lecteur vidéo, une visionneuse 3D ou une étape de checkout. Le navigateur charge d'abord le chunk d'entrée, puis récupère des chunks supplémentaires à mesure que l'utilisateur navigue ou que des composants spécifiques se montent. Un découpage efficace exige une attention particulière aux dépendances partagées pour éviter le code dupliqué ou les chargements en cascade sur le chemin critique.

Pourquoi c'est important

Chaque kilo-octet de JavaScript a un coût : parsing, compilation, exécution et, dans les applis à framework, hydratation. Les gros bundles monolithiques dégradent l'INP et retardent le time-to-interactive sur les appareils Android de milieu de gamme qui dominent encore le trafic commerce mondial. Le découpage de code garde le bundle initial focalisé sur ce dont la première vue a réellement besoin, en différant le reste. Pour les boutiques qui intègrent analytics, ab-testing, personnalisation, widgets de recommendation-engine et chat, les économies se cumulent vite. Le découpage améliore aussi la réutilisation du cache entre déploiements, car les chunks inchangés restent en cache.

Cas d'usage

Une boutique headless typique découpe par route pour que les PDP, PLP et le checkout obtiennent chacun leurs propres chunks. Les composants lourds comme un configurateur, un widget d'avis ou un module vidéo sont chargés via des imports dynamiques uniquement au besoin. Les React Server Components poussent une grande partie du travail de rendu vers le serveur, ne laissant que des îlots interactifs dans le bundle client, ce qui complète le découpage de code dans Next.js. Dans Astro, l'islands-architecture pousse l'idée plus loin en envoyant zéro JS par défaut et en n'hydratant que ce qui est marqué interactif. Combiné au lazy-loading des images et des scripts tiers, le découpage de code est une fondation non négociable du travail moderne sur les Core Web Vitals.

Voir aussi

Découvrez Composable Headless Frontend · Performance and Core Web Vitals.