Minifier le JavaScript _

Comment fonctionne la minification JavaScript

Terser travaille en quatre étapes sur l'arbre syntaxique abstrait (AST) de votre code. Chaque étape est indépendante, vous pouvez donc en activer ou désactiver n'importe laquelle sans perturber les autres.

1. Analyser. Terser analyse votre JavaScript en un AST. Toute erreur de syntaxe remonte ici avec le jeton et la ligne qui en sont à l'origine, vous permettant d'identifier le vrai problème avant qu'une transformation ne s'exécute. L'analyseur accepte toutes les constructions ECMAScript standard jusqu'aux dernières propositions de stage 4.
2. Compresser. Le compresseur parcourt l'AST et applique des dizaines de transformations préservant la sémantique : pliage de constantes, élimination de branches mortes, inlining de fonctions pures courtes, regroupement de déclarations var séquentielles, et réécriture de formes d'instruction équivalentes (if/else en ternaires, raccourcissement de chaînes de comparaisons, réduction de retours conditionnels). Chaque transformation est réversible en principe ; le compresseur ne modifie jamais le comportement observable.
3. Mangling. Le mangler renomme les liaisons locales vers les identifiants uniques les plus courts (a, b, c, …) au sein de chaque portée. Seuls les noms qui ne peuvent pas sortir de la limite du module sont renommés ; les liaisons exportées, les clés de propriétés et les références globales survivent intactes. C'est la plus grande économie d'octets de toutes les étapes.
4. Générer. Terser imprime l'AST transformé sous forme de chaîne JavaScript avec les espaces réduits et les séparateurs d'instructions ramenés au minimum que la grammaire accepte. Les commentaires sont supprimés, sauf si le commutateur de préservation de licence garde les blocs /*! … */ que la plupart des licences CDN exigent de conserver.

Pourquoi minifier le JavaScript

• Pages qui se chargent plus vite. Des scripts plus légers s'analysent et s'exécutent plus tôt. Sur une connexion mobile 4G, une réduction de 40 pour cent en octets fait gagner de vraies secondes au Time to Interactive, la métrique que Google PageSpeed Insights mesure le plus agressivement.
• Factures d'egress CDN réduites. CloudFront, Cloudflare et Fastly facturent au gigaoctet d'egress. Une réduction de 40 pour cent des scripts sur des millions de pages vues mensuelles se cumule en économies réelles avant tout travail sur les images ou le CSS. Le calcul tient même après gzip et brotli — la minification retire des tokens que le compresseur aurait sinon dû encoder.
• Ce minificateur n'alourdit pas votre page. Terser fait ~1 Mo non compressé. La plupart des minificateurs en ligne chargent l'ensemble de la bibliothèque au chargement de la page, ce qui plombe leur propre score Lighthouse et rend la page lente avant que l'utilisateur n'ait tapé quoi que ce soit. Cette page charge Terser en différé seulement quand vous cliquez sur Minifier ou activez le mode en direct — le rendu initial reste donc sous les seuils Core Web Vitals que l'outil promet de vous aider à atteindre.
• Réussir les Core Web Vitals. Lighthouse et PageSpeed Insights signalent le JavaScript volumineux comme contributeur direct à un mauvais Total Blocking Time. Minifier les bibliothèques fournisseurs et les bundles applicatifs est le gain le plus rapide dans les audits Lighthouse « Réduire le JavaScript inutilisé » et « Supprimer les modules en double » — généralement une réduction ponctuelle valant dix à vingt points.

Applications courantes

La minification JavaScript apparaît à presque toutes les étapes d'un projet web moderne.

• Hooks de pré-commit : minifiez des scripts utilitaires individuels avant de les commiter dans un dépôt pour que l'artefact commité soit prêt pour la production et que le diff montre les changements logiques plutôt que les variations d'espaces.
• Audits de widgets tiers : collez l'extrait d'intégration d'un fournisseur et vérifiez s'il est déjà minifié ou peut être encore réduit avant d'être servi à des millions d'utilisateurs.
• Nettoyage de scripts anciens : compressez de vieux plugins jQuery et scripts écrits à la main qui datent d'avant votre pipeline de compilation actuel, sans toucher l'arborescence source.

Un exemple concret

Prenez une petite fonction : function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — environ 130 octets commentaire inclus. Collez-la ci-dessus avec Mangling et Compression tous deux activés. La sortie se réduit à environ function add(n,o){return n+o}console.log(add(1,2)); — environ 55 octets, soit une réduction de 58 pour cent. Le nom de fonction add survit car il est référencé dans l'appel console.log ; les noms de paramètres firstNumber et secondNumber se raccourcissent en une lettre car ils sont locaux au corps de la fonction. Désactivez le Mangling pour conserver des noms de paramètres lisibles tout en compressant les espaces et supprimant le commentaire.

FAQ

Cela s'exécute-t-il dans mon navigateur ?

Oui. Terser est chargé en différé la première fois que vous cliquez sur Minifier ou activez le mode en direct — environ 200 Ko compressés atterrissent dans le cache de votre navigateur, rien de plus n'est téléchargé ensuite. Votre code ne quitte jamais la page.

Qu'est-ce que le mangling des noms et est-ce sûr ?

Le mangling renomme les variables locales en une seule lettre pour économiser des octets. C'est sûr pour les scripts autonomes et les bundles IIFE car les renommages ne sortent jamais de la portée. Ce n'est PAS sûr pour les scripts qui exposent des globals par leur nom (ex. window.myLib = …) sans encapsuleur. Désactivez le Mangling en cas de doute.

Pourquoi mon code est-il cassé après minification ?

Trois suspects habituels : eval ou with référençant des variables par chaîne ; lectures de Function.name ou arguments.callee qui dépendent de l'identifiant original ; ou globals exposés par un nom qui a été renommé. Désactivez d'abord le Mangling pour isoler si le renommage ou une transformation de Compression est en cause.

Est-ce que cela supporte la syntaxe moderne (ES2020+) ?

Oui. Réglez la cible ECMAScript sur ES2020 ou Suivant et Terser préserve le chaînage optionnel, l'opérateur de coalescence nulle, l'await de premier niveau et les opérateurs d'affectation logique. Réglez-la sur ES5 et Terser rétrocompile là où il peut, mais ce n'est pas un transpileur complet — utilisez Babel pour la syntaxe qu'ES5 ne peut pas du tout représenter.

La minification JavaScript côté navigateur avec Terser donne une sortie de qualité production sans ajouter un outil de compilation. Collez un script, choisissez la cible ECMAScript, copiez ou téléchargez le résultat. Aucun envoi, aucun compte, aucun pipeline de compilation. Le minificateur lui-même ne charge que quand vous le demandez — ouvrir cette page ne vous coûte que quelques kilo-octets, pas un méga-octet.