Code splitting

Définitions Digital > Code splitting

Le code splitting (fractionnement de code) est une technique d’optimisation web qui consiste à diviser le code source d’une application en plusieurs fragments plus petits, chargés dynamiquement au fur et à mesure des besoins de l’utilisateur.

Au lieu de charger l’intégralité du code JavaScript/CSS d’un coup (bundle unique), le code splitting permet de :

  • Charger uniquement le code nécessaire à l’affichage initial
  • Charger le reste du code à la demande (on-demand) ou en arrière-plan

Méthodes principales

1. Splitting par routes (Route-based)

// Chargement paresseux des composants de route
const Home = () => import('./routes/Home.vue')
const About = () => import('./routes/About.vue')

2. Splitting par composants (Component-based)

// Chargement dynamique de composants lourds
const HeavyComponent = () => import('./HeavyComponent.vue')

3. Splitting manuel

// Création de points de séparation explicites
import(/* webpackChunkName: "analytics" */ './analytics')

Avantages pour la performance

  • Temps de chargement initial réduit (moins de code à télécharger)
  • Meilleure mise en cache (fragments indépendants)
  • Meilleure expérience utilisateur (contenu visible plus rapidement)
  • Moins de bande passante utilisée

Outils courants

  • Webpack : SplitChunksPlugin, import()
  • Vite : Support natif via ES modules dynamiques
  • React : React.lazy() + Suspense
  • Vue : defineAsyncComponent()
Les contenus de définition restent publics. Les ressources (outils, grilles, supports) liées à cette fiche sont disponibles dans l’espace membre.

Plus de publications