Tree Shaking

Qu'est-ce que le Tree Shaking ?

Le Tree Shaking est une technique d’optimisation utilisée dans le développement moderne. Elle consiste à supprimer automatiquement le code inutilisé (souvent appelé "code mort") afin de ne livrer aux utilisateurs que les fonctionnalités réellement nécessaires au fonctionnement de l’application.

Le terme est volontairement imagé. Une application peut être comparée à un arbre : certaines branches sont utilisées en permanence, tandis que d’autres existent dans le code mais ne servent jamais. Lors de la phase de build du projet, le Tree Shaking revient à secouer cet arbre pour éliminer ces branches inutiles, avant la mise en ligne.

Le bénéfice est immédiat : l'application est plus légère, les temps de chargement diminuent et l’expérience utilisateur s’améliore. Cet enjeu est particulièrement critique dans le contexte des applications mobiles , où la performance, la consommation de données et la fluidité ressentie conditionnent directement la rétention des utilisateurs.

Une des solutions pour réduire l'obésité numérique

Pourquoi a-t-on besoin de "secouer" le code ? Parce que le développement repose à la fois sur un empilement de couches successives et sur l’usage massif de bibliothèques tierces.

Une application n’est jamais figée. Elle évolue par ajouts successifs : nouvelles fonctionnalités, expérimentations, refontes partielles. Au fil du temps, certaines portions de code deviennent inutiles, sans être systématiquement supprimées. Ce phénomène est naturel dans des projets vivants et complexes.

À cela s’ajoute un second facteur majeur : l’utilisation de bibliothèques externes. Pour gagner du temps, les équipes intègrent des librairies complètes (dates, graphiques, composants d’interface), alors qu’elles n’en utilisent parfois qu’une infime partie. Sans optimisation spécifique, l’ensemble de ces dépendances est malgré tout inclus dans le code final.

Résultat : l’application embarque des couches et des fonctions qui ne seront jamais exécutées, mais que l’utilisateur doit tout de même télécharger.

Le Tree Shaking permet de corriger ce double effet. Il analyse précisément ce qui est réellement utilisé par l’application et élimine tout le reste. Le code livré est ainsi allégé automatiquement, sans dépendre d’un nettoyage manuel permanent.

Comment fonctionne le Tree Shaking ?

Sans entrer dans la complexité des outils de compilation (Bundlers), le mécanisme repose sur une analyse statique du code.

• L'inventaire : L'outil parcourt l'ensemble des fichiers du projet. Il repère tous les éléments (fonctions, variables) qui sont explicitement importés et utilisés.
• Le marquage : Il construit un arbre de dépendances. Si une branche de code n'est jamais appelée par l'application principale, elle est marquée comme "inutile".
• L'élimination : Lors de la génération du fichier final destiné à la production, ces parties marquées sont physiquement supprimées.

Il s’agit d’une optimisation chirurgicale : elle permet de profiter de la richesse des outils modernes sans en faire porter le coût en performance à l’utilisateur final.

Pourquoi le Tree Shaking est indispensable ?

Le Tree Shaking n'est pas une coquetterie technique, c'est un levier direct de performance commerciale.

1. Amélioration des Core Web Vitals

Google pénalise les sites lents. En réduisant la taille des fichiers JavaScript, le navigateur les télécharge et les exécute plus vite. Cela améliore directement le LCP (Large Contentful Paint) et l'INP (Interaction to Next Paint), des critères majeurs de référencement.

2. Expérience Mobile et Taux de Rebond

Sur un réseau mobile instable (4G/5G), chaque kilo-octet compte. Télécharger du code inutile peut ajouter plusieurs secondes au temps de chargement. Or, on sait qu'au-delà de 3 secondes d'attente, plus de 50% des utilisateurs mobiles quittent le site (Rebond). Le Tree Shaking protège votre taux de conversion.

3. Économie de ressources

Moins de code, c'est moins de bande passante consommée et moins de batterie utilisée par le téléphone du visiteur pour décoder le script. C'est un pas vers une conception technique plus sobre.

Les prérequis techniques (Pas de magie)

Le Tree Shaking ne fonctionne pas par magie sur tous les projets. Il nécessite une architecture de code moderne.

Pour que l'outil puisse "voir" quelles branches sont inutiles, le code doit être écrit avec une syntaxe spécifique appelée ES Modules (import / export). Cette structure est statique et prédictible.

À l'inverse, sur des projets plus anciens utilisant des modules dynamiques (CommonJS), la structure est trop rigide ou imprévisible pour être "secouée" sans risque de casse. C'est pourquoi l'adoption de stacks techniques modernes (comme les versions récentes de React, Vue ou Next.js) est souvent un prérequis pour activer ce levier.

Les effets de bord du Tree Shaking

L'automatisation a ses limites. Parfois, un morceau de code semble inutile (aucune fonction ne l'appelle), mais il effectue une action globale importante, comme l'ajout d'une police d'écriture ou la modification d'un style CSS global. On appelle cela un "Effet de bord".

Si le Tree Shaking est mal configuré, il peut supprimer ce code "invisible" en pensant bien faire, ce qui brise le design ou une fonctionnalité du site. L'expertise du développeur est donc indispensable pour configurer les exceptions et indiquer à l'outil : "Touche à tout, mais ne supprime pas ce fichier-là, même s'il a l'air inactif".

L’avis de notre expert

Le Tree Shaking est un standard industriel que nous utilisons par défaut sur tous les projets que nous développons. Cependant, attention à ne pas le voir comme une excuse pour coder sans aucune discipline.

Ce n'est pas parce que le Tree Shaking existe qu'il faut importer des bibliothèques géantes sans réfléchir. La meilleure performance vient d'abord du choix conscient de dépendances légères et adaptées, le Tree Shaking n'intervenant que comme une sécurité finale.