Concepts de regroupement : tree shaking et division du code
Comprenez comment les regroupeurs suppriment les exports inutilisés grâce au tree shaking et divisent la sortie en fragments pour accélérer le chargement initial des pages.
Concepts de regroupement : tree shaking et division du code est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que fait un outil de regroupement ?
Un outil de regroupement (Vite, webpack, Rollup ou Parcel) lit vos fichiers source, résout les imports, transforme le code (transpile, minifie et optimise), puis produit des fichiers que le navigateur peut charger efficacement.
Graphe des modules
L'outil de regroupement part d'un point d'entrée et suit chaque import pour construire un graphe des modules — une carte complète de tout le code utilisé par votre application. Ce graphe sert de base à toutes les optimisations.
Élagage de l'arbre — élimination du code mort
L'élagage de l'arbre analyse le graphe des modules et supprime les exportations qui ne sont jamais importées. Seuls les imports statiques des modules ES permettent cet élagage — require() de CommonJS est dynamique et ne peut pas être analysé statiquement.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Effets de bord et sideEffects: false
Si votre bibliothèque n'a aucun effet de bord (réexportations pures), ajoutez "sideEffects": false à package.json. Cela indique aux outils de regroupement qu'ils peuvent supprimer sans risque tout fichier de votre paquet qui n'est pas importé.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Découpage du code
Le découpage du code divise le paquet en plusieurs fragments chargés à la demande. Le fragment principal reste petit pour accélérer le chargement initial. Les fragments secondaires ne sont chargés qu'en cas de besoin (routes différées, options de fonctionnalité).
Découpage par points d'entrée
Les applications multipages possèdent plusieurs points d'entrée, chacun produisant son propre paquet. Le code partagé, comme React, est automatiquement extrait dans un fragment partagé.
Découpage par imports dynamiques
Chaque appel dynamique à import() crée un point de découpage. L'outil de regroupement génère un fragment distinct pour le module chargé à la demande et toutes ses dépendances qui lui sont propres.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Regroupement des dépendances
Le code de node_modules change rarement. Extrayez-le dans un fragment de dépendances avec une durée de conservation TTL longue. Les utilisateurs qui ont mis ce fragment en cache ne téléchargent à nouveau que le fragment de l'application lors des mises à jour.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minification
Les minificateurs (esbuild, terser) suppriment les espaces, renomment les variables avec une seule lettre et appliquent d'autres réductions. Une application React classique perd 60 à 70 % de sa taille après la minification.
Hachage fondé sur le contenu
Les outils de regroupement ajoutent au nom du fichier un hachage de son contenu : index-a1b2c3.js. Lorsque le contenu change, le hachage change, le nom du fichier change et le navigateur récupère le nouveau fichier. Les fragments inchangés restent en cache indéfiniment.
Cartes source
Les cartes source associent la sortie minifiée à votre code source original. Elles sont générées séparément (et ne sont pas envoyées aux utilisateurs), puis utilisées par DevTools pour le débogage. Activez-les avec build.sourcemap: true.
Vérification rapide
Quelle est l'exigence principale pour que l'élagage de l'arbre fonctionne ?
Récapitulatif : concepts de regroupement
Les outils de regroupement résolvent le graphe des modules, élaguent les exportations inutilisées (ce qui nécessite ESM statique), découpent le code en fragments pour le chargement différé, extraient le code des dépendances pour la mise en cache, minifient la sortie et ajoutent des hachages de contenu pour invalider le cache. Les cartes source permettent de déboguer le code minifié.
Questions Fréquemment Posées
La leçon « Concepts de regroupement : tree shaking et division du code » est-elle gratuite ?
Oui — le texte complet de « Concepts de regroupement : tree shaking et division du code » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Concepts de regroupement : tree shaking et division du code » ?
Comprenez comment les regroupeurs suppriment les exports inutilisés grâce au tree shaking et divisent la sortie en fragments pour accélérer le chargement initial des pages. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Concepts de regroupement : tree shaking et division du code » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Modules ES : import, export et import dynamique
- npm et package.json : dépendances et scripts
- Vite : serveur de développement et compilation
- Concepts de regroupement : tree shaking et division du code