Tree shaking vs minification : comprendre la différence pour optimiser votre bundle
Comprenez les différences entre tree shaking et minification JavaScript — deux techniques complémentaires pour réduire la taille de vos bundles et accélérer votre site.
Deux techniques souvent confondues
En optimisant un front moderne, vous entendez sans cesse « minifier » et « tree-shaker » vos bundles. Ce ne sont pas deux noms pour la même chose : la <strong>minification</strong> compresse le code déjà inclus dans le fichier final (espaces, noms courts), alors que le <strong>tree shaking</strong> retire du graphe les modules qui ne sont jamais utilisés. Les deux réduisent les octets transférés, mais à des étapes différentes du pipeline. Pour une passe rapide sur un fichier isolé (sans bundler), un minificateur JavaScript en ligne suffit souvent ; pour une application complète, vous combinez généralement analyse statique des imports, bundler en mode production et minificateur (Terser, esbuild, SWC…). Ce guide pose les définitions, un tableau comparatif et une configuration réaliste avec Vite ou Webpack — en renvoyant vers notre guide de minification JavaScript pour les réglages fins.
Minification et tree shaking : deux effets différents
La minification travaille sur un fichier dont le contenu est déjà décidé : elle enlève tout ce qui est superflu pour le moteur JS (espaces, commentaires, renommage local agressif selon l’outil). Elle ne peut pas deviner si une fonction exportée servira plus tard si elle est bien présente dans le bundle. Pour les bases et comparatifs d’outils, voyez notre guide complet sur la minification JavaScript. Pour inspecter ou retrouver la lisibilité après coup, gardez sous la main un déminificateur JavaScript ou la fonction Beautify.
Avant
function calculateTotal(price, quantity) {
const taxRate = 0.2;
return price * quantity * (1 + taxRate);
}
export { calculateTotal };Après
function calculateTotal(n,t){return n*t*1.2}export{calculateTotal};Le tree shaking s’appuie sur les modules ES (`import` / `export`) et sur une analyse statique : tout ce qui n’est pas référencé depuis une entrée peut être écarté avant même que la minification intervienne. Les bibliothèques doivent exposer des builds compatibles (`sideEffects` dans `package.json`, pas de mutations globales cachées). La démonstration la plus parlante reste le passage d’un import « baril » à un import ciblé.
Avant
// utils/math.ts — tout le barrel exporté est potentiellement traîné
export function square(x){return x*x}
export function cube(x){return x*x*x}
export function unusedLegacy(){/* ancienne API */}
// main.ts
import { square } from './utils/math'Après
// Après analyse du bundler : seules les définitions
// réellement utilisées peuvent rester dans le chunk,
// puis la minification réduit encore la syntaxe.
// cube() et unusedLegacy() peuvent être éliminés
// si aucun autre fichier ne les ré-importe.Il n’existe pas de tree shaking ES modules pour votre feuille CSS comme pour le JS, mais les pipelines PostCSS / Tailwind / PurgeCSS jouent un rôle équivalent : ils retirent les règles non utilisées avant la phase où vous appliquez un minificateur CSS en ligne ou PostCSS cssnano sur la sortie finale.
Mesurer ce qui change vraiment dans le bundle
Les deux techniques se voient dans des colonnes différentes du rapport : le tree shaking diminue le nombre et la surface des modules (par exemple lodash qui disparaît presque entièrement), la minification réduit la colonne « taille gzip » pour un même graphe. Utilisez un treemap pour éviter les régressions après mise à jour de dépendances.
Activez systématiquement `NODE_ENV=production` (ou équivalent) : sans ce signal, certains bundlers désactivent optimisations et dead-code elimination.
Tableau mental : minification vs tree shaking
Utilisez ce récapitulatif quand vous estimez un ticket d’optimisation : la première question est « ce code doit-il exister dans le graphe ? », la seconde est « comment réduire sa représentation textuelle ? ».
Minification
Tree shaking
Ces contrôles évitent les optimisations hors sol.
Minifier rapidement un fichier hors bundler
Quand vous n’avez pas encore branché Webpack/Vite — ou que vous optimisez un script livré tel quel — collez votre JS dans notre outil : vous obtenez une sortie compactée immédiatement, avec option inverse pour relire le code.
Coller ou charger votre fichier
Utilisez le <a href="/fr/minify-js" class="text-primary hover:underline">minificateur JavaScript en ligne</a> : tout reste dans le navigateur.
Comparer avec Beautify
Alternez avec Beautify pour un format lisible équivalent à un petit « undo » avant de réinjecter dans votre pipeline.
Ne pas confondre avec le shaking
L’outil minifie un fichier à la fois ; pour éliminer des modules dans tout un projet, il faut bundler en production.
Quand votre codebase grossit, alignez-vous sur les pratiques décrites dans notre comparatif minificateurs en ligne vs outils de build : l’outil en ligne garde une place pour les exceptions et les prototypes.
Combiner tree shaking et minification dans le build
`vite build` active Rollup en production avec tree shaking et minification esbuild par défaut — vérifiez que vos imports sont compatibles ES modules.
Configuration
// vite.config.ts (extrait)
import { defineConfig } from 'vite'
export default defineConfig({
build: {
target: 'es2019',
minify: 'esbuild',
rollupOptions: {
treeshake: {
moduleSideEffects: (id) => !id.includes('.css'),
propertyReadSideEffects: false,
},
},
},
})Utilisation
# Build prod avec métriques
NODE_ENV=production npm run build
# Inspectez dist/assets/*.js — les chunks reflètent
# ce que Rollup a conservé après shaking puis minification.`mode: 'production'` active `usedExports` et la compilation avec minifier ; assurez-vous que `package.json` des libs déclare correctement les effets de bord.
Configuration
// webpack.config.js (extrait)
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
sideEffects: true, // respecte package.json "sideEffects"
minimize: true,
minimizer: [
/* TerserPlugin ou SWCMinifyPlugin */
],
},
};Utilisation
// Pour une entrée évidente :
// webpack analyse depuis votre entrypoint,
// marque exports inutilisés, puis le minifier compacte.
import { initApp } from './app'
initApp()Enchaînez purge Tailwind ou PurgeCSS, puis minification — comme vu dans notre guide sur la minification CSS. Le shaking « logique » est côté purge ; la minification peaufine la sortie.
Exemple de base
/* Après purge des classes non utilisées */
.btn{padding:.5rem 1rem;border-radius:.375rem}Minification de fichier
/* postcss avec cssnano en fin de chaîne */
.btn{padding:.5rem 1rem;border-radius:.375rem}
/* → devient une ligne ultra compacte */Conclusion
Tree shaking et minification sont complémentaires : le premier dessine un graphe léger, le second écrit ce graphe avec le minimum d’octets. Ignorez l’un ou l’autre et vous laissez soit du code mort embarqué, soit une représentation encore verbeuse d’un graphe déjà propre. Pour les snippets hors projet, un minificateur en ligne suffit ; pour tout le reste, automatisez dans votre bundler tout en gardant FastMinify sous la main pour les cas limites.
Articles connexes
Découvrez comment beautifier et formater votre code JavaScript, CSS, HTML et JSON instantanément. Guide complet des outils de beautification en ligne et intégrés aux éditeurs.
Maîtrisez la sérialisation PHP : serialize, unserialize, conversion JSON↔PHP. Guide pratique avec exemples concrets et bonnes pratiques de sécurité.
Apprenez à minifier vos fichiers XML pour optimiser vos sitemaps, flux RSS et fichiers de configuration. Réduisez la taille de vos XML de 20 à 50%.