La minification JavaScript est souvent confondue avec l'obfuscation, alors que ce sont deux tâches distinctes avec des objectifs différents : l'une économise des octets, l'autre rend la logique du code plus difficile à comprendre.
Ce que fait la minification
Un minificateur retire les espaces, les commentaires et les retours à la ligne, et raccourcit les noms des variables locales à un ou deux caractères là où c'est sans risque. La logique du programme reste totalement inchangée : c'est une compression purement technique du fichier.
De JSMin à Terser : une brève histoire
Douglas Crockford a publié JSMin au début des années 2000, l'un des premiers minificateurs JavaScript largement utilisés : il retirait les espaces et les commentaires, mais laissait les noms de variables intacts. Des outils modernes comme Terser (un fork d'UglifyJS) ou esbuild vont plus loin : ils analysent le code sous forme d'AST et renomment les variables locales et les paramètres de fonction en une seule lettre partout où c'est sans risque, ce qui réduit bien plus la taille du fichier que la seule suppression des espaces sur un projet de taille réelle.
Les source maps : comment déboguer du code renommé
Une fois les noms de variables réduits à a, b et c, et les retours à la ligne disparus, une erreur en production pointe vers une position illisible au milieu d'une seule ligne géante. La source map résout ce problème : c'est un fichier séparé qui associe chaque position du code minifié à sa ligne, sa colonne et son nom de variable d'origine, permettant aux DevTools du navigateur d'afficher une pile d'appels lisible même si le navigateur exécute en réalité le fichier minifié.
Pourquoi c'est utile
- Réduire la taille d'un bundle JS avant de le déployer en production.
- Accélérer le téléchargement et l'analyse du script dans le navigateur.
- Comprendre pourquoi le code minifié reste lisible si on le veut, alors que le code obfusqué est bien plus difficile à interpréter.
Tree shaking contre minification
Le tree shaking est une technique distincte à ne pas confondre avec la minification : il analyse le graphe de dépendances des modules et retire complètement du bundle final les fonctions et exports qui ne sont utilisés nulle part, dès l'étape de build. La minification, elle, travaille sur du code déjà fini et se contente de raccourcir sa représentation textuelle. Les bundlers modernes comme Vite ou webpack appliquent généralement les deux techniques en séquence.