Quelle est la différence entre tree shaking et code splitting ?

Le tree shaking supprime le code mort (fonctions et modules jamais appelés) au moment du build, tandis que le code splitting découpe le bundle en plusieurs fichiers chargés dynamiquement selon les besoins de l'utilisateur. Les deux techniques sont complémentaires et visent à réduire le JavaScript envoyé au navigateur.

Quels outils utiliser pour optimiser ses bundles JavaScript ?

Les bundlers modernes comme Webpack 5, Vite et Rollup intègrent nativement le tree shaking et le code splitting. Des plugins comme Terser assurent la minification, et des outils d'analyse comme Webpack Bundle Analyzer ou Lighthouse permettent d'identifier les optimisations à mener.

JavaScript et performance : tree shaking, code splitting et bundle optimization

Pourquoi le poids du JavaScript est un enjeu critique

Le JavaScript représente aujourd’hui en moyenne 500 Ko par page sur le web (source : HTTP Archive, 2024). Pire encore, contrairement à une image, chaque kilo-octet de JS doit être téléchargé, parsé, compilé puis exécuté. Résultat : un bundle JavaScript trop lourd peut ajouter 2 à 5 secondes au Time to Interactive sur mobile.

Pour Google, cette lenteur se traduit par un mauvais score Core Web Vitals et donc un impact direct sur votre référencement. Heureusement, trois techniques permettent de reprendre le contrôle : le tree shaking, le code splitting et l’optimisation des bundles.

Tree shaking : éliminer le code mort

Le principe

Le tree shaking (littéralement “secouer l’arbre”) analyse vos imports ES modules et supprime le code qui n’est jamais utilisé. Imaginez une bibliothèque comme Lodash qui pèse 70 Ko minifié : si vous n’utilisez que la fonction debounce, pourquoi embarquer les 300+ autres fonctions ?

Exemple concret

// ❌ Import complet : ~70 Ko
import _ from 'lodash';

// ✅ Import ciblé + tree shaking : ~1 Ko
import { debounce } from 'lodash-es';

Avec un bundler comme Webpack 5, Rollup ou Vite, le tree shaking est activé automatiquement en mode production sur les ES modules. Veillez cependant à :

Utiliser des imports nommés plutôt que des imports par défaut
Vérifier que vos dépendances exposent un format ESM (ES Modules)
Ajouter "sideEffects": false dans votre package.json quand c’est pertinent

Sur un projet e-commerce récent, l’équipe de Lueur Externe a réduit la taille d’un bundle de 43 % simplement en remplaçant des imports globaux par des imports ciblés compatibles tree shaking.

Code splitting : charger le bon code au bon moment

Le principe

Plutôt que d’envoyer un unique fichier JavaScript monolithique, le code splitting découpe votre application en chunks chargés dynamiquement. L’utilisateur ne télécharge que le code nécessaire à la page qu’il visite.

Mise en œuvre

Les stratégies courantes sont :

Par route : chaque page charge son propre chunk (idéal pour les SPA React, Vue, Next.js)
Par composant : les éléments lourds (éditeur, carte interactive, modale vidéo) sont chargés en lazy loading
Par vendor : les bibliothèques tierces sont isolées dans un chunk séparé, favorisant le cache navigateur

// React : lazy loading d'un composant
const Checkout = React.lazy(() => import('./Checkout'));

Sur un site WordPress avec une interface riche, passer d’un bundle unique de 380 Ko à quatre chunks ciblés peut faire gagner 1,2 seconde sur le Largest Contentful Paint mobile.

Bundle optimization : les finitions qui comptent

Tree shaking et code splitting posent les fondations. L’optimisation des bundles complète le travail :

Technique	Gain typique	Outil
Minification (Terser)	30-40 % de taille en moins	Webpack, Vite
Compression Brotli	15-20 % vs Gzip	Serveur Nginx, AWS CloudFront
Hashing des fichiers	Cache longue durée	Webpack `[contenthash]`
Analyse du bundle	Identification des dépendances lourdes	Webpack Bundle Analyzer

Checklist rapide

✅ Activer le mode production de votre bundler
✅ Vérifier l’absence de polyfills inutiles (ex. : supprimer core-js si vous ne ciblez que les navigateurs modernes)
✅ Servir les assets via un CDN avec compression Brotli
✅ Surveiller régulièrement la taille des bundles avec Lighthouse ou bundlephobia

Conclusion : chaque kilo-octet compte

Optimiser le JavaScript n’est pas un luxe technique, c’est un levier SEO et UX mesurable. En combinant tree shaking, code splitting et une stratégie de bundle rigoureuse, vous pouvez facilement diviser par deux le poids de vos scripts — et constater l’impact immédiat sur vos Core Web Vitals.

Chez Lueur Externe, agence web certifiée AWS Solutions Architect et experte en performance depuis 2003, nous auditons et optimisons les bundles JavaScript de sites PrestaShop, WordPress et sur-mesure. Besoin d’un regard expert sur la performance de votre site ? Contactez notre équipe pour un audit personnalisé.