À retenir
- Réduit la taille des fichiers finaux (bundles).
- Accélère le temps de chargement des pages web.
- Nécessite l'utilisation de modules modernes pour être efficace.
Le tree shaking est une technique d'optimisation informatique qui consiste à retirer automatiquement les parties de code inutilisées d'un programme avant sa mise en ligne. Imaginez que vous secouez un arbre : les feuilles mortes (le code inutile) tombent, et seules les feuilles vivantes (le code nécessaire) restent attachées. Cela permet d'obtenir une application finale beaucoup plus légère et rapide.
Étymologie
Emprunté à l'anglais, le terme se traduit littéralement par « secouage d'arbre ». En programmation, les dépendances d'un logiciel sont souvent représentées sous forme d'une structure arborescente. L'image du « tree shaking » illustre l'action de débarrasser cet arbre de ses branches et feuilles inutiles.
Exemples d'usage
- Une bibliothèque de calcul contient 500 fonctions, mais votre site n'en utilise qu'une seule pour calculer une remise : le tree shaking supprimera les 499 autres du fichier final.
- Dans un projet web, l'outil de construction (bundler) analyse les instructions
importetexportpour identifier les morceaux de code qui ne sont jamais appelés.
Cas d'usage
Ce concept est omniprésent dans le développement web moderne (JavaScript/TypeScript). Il intervient lors de l'étape de compilation ou de regroupement (bundling) pour réduire le poids des fichiers envoyés aux navigateurs des utilisateurs, ce qui est crucial pour les performances sur mobile.
Bonnes pratiques
Pour favoriser le tree shaking, utilisez toujours la syntaxe de modules moderne (ES Modules avec import et export) plutôt que l'ancienne syntaxe require. Évitez également les « effets de bord » (code qui s'exécute tout seul lors de l'importation), car les outils pourraient ne pas oser supprimer ce code de peur de casser l'application.
Synonymes
Antonymes
Conseil
Si vous débutez, ne vous souciez pas de configurer le tree shaking manuellement ; les outils modernes s'en occupent. Par contre, prenez l'habitude d'importer précisément ce dont vous avez besoin (ex: import { map } from 'lodash-es') plutôt que toute la bibliothèque d'un coup.
Questions fréquentes
Quelle est la différence avec la minification ?
La minification réduit la taille du code existant (en supprimant les espaces ou en raccourcissant les noms de variables). Le tree shaking, lui, supprime carrément les morceaux de code qui ne servent à rien.
Est-ce que c'est automatique ?
Oui, la plupart des outils modernes comme Webpack, Vite ou Rollup le font par défaut, à condition que le code soit écrit de manière compatible.