Aller au contenu principal
Tooletto

Minifieur JS

Minifiez du JavaScript grâce à Terser — le même moteur utilisé par les principaux outils de build. Retire les espaces et les commentaires, et peut en option renommer les variables, pour produire une sortie plus légère et toujours valide entièrement dans votre navigateur.

  • Les fichiers ne quittent jamais votre appareil
  • Gratuit, sans inscription
  • Aucun filigrane
  • Fonctionne hors ligne une fois chargé
Loading tool…

Comment utiliser Minifieur JS

  1. 1

    Collez votre code

    Déposez n'importe quel fichier ou extrait JavaScript valide.

  2. 2

    Choisissez vos options

    Laissez le renommage des variables activé pour la sortie la plus légère, ou désactivez-le si vous avez besoin de lire le résultat.

  3. 3

    Copiez le résultat

    Copiez le code minifié, avec la taille économisée.

Ce que fait réellement la minification en coulisses

Retirer les espaces et les commentaires est la partie facile et évidente de la minification — et à elle seule, elle change à peine la donne sur du code bien écrit. La vraie réduction de taille vient de deux transformations plus profondes : le renommage (mangling), qui renomme chaque variable locale et argument de fonction avec l'identifiant le plus court possible (`accumulateur` devient `a`, `resultatTemporaire` devient `t`), et l'élimination de code mort, qui retire les branches et expressions dont une analyse statique du code peut prouver qu'elles ne s'exécuteront jamais ou n'affecteront jamais la sortie. Les deux nécessitent de réellement comprendre la structure du code — ses portées, quels noms sont locaux ou exportés, quelles branches sont prouvablement inatteignables — ce qui explique pourquoi un vrai outil basé sur un analyseur syntaxique comme Terser produit une sortie nettement plus petite que ne le pourrait jamais un simple rechercher-remplacer sur les espaces.

Pourquoi la plupart des développeurs touchent rarement à un minifieur autonome désormais

Des bundlers comme Webpack, esbuild, Rollup et Vite minifient automatiquement leur sortie dans le cadre d'un build de production, en utilisant presque toujours Terser ou un moteur compatible Terser en coulisses — donc pour quiconque travaille dans un projet JavaScript moderne, la minification se produit déjà invisiblement à chaque exécution d'une commande de build. Un outil autonome comme celui-ci couvre les cas qui tombent en dehors de ce pipeline : une simple balise script sans étape de build, une vérification rapide de la taille qu'un extrait gagnerait à être réduit, ou un fichier ponctuel à compresser sans tirer toute une configuration de bundler pour ce seul besoin.

L'inverse du formatage, pas un remplacement pour celui-ci

Minifier et formater sont des opérations opposées sur le même code : cet outil retire les espaces, la structure et la lisibilité qu'un formateur comme Prettier ajoute délibérément. Son outil jumeau, le Formateur JavaScript, défait exactement ce que celui-ci fait — utile pour la direction inverse, transformer un fichier minifié que quelqu'un vous a transmis en quelque chose d'assez lisible pour être réellement débogué.

Un vrai pipeline de build associe normalement la minification à une source map — un fichier séparé qui fait correspondre chaque position de la sortie minifiée à sa ligne d'origine dans la source — précisément pour qu'un débogueur puisse encore afficher du code lisible et des numéros de ligne corrects en production, malgré le fait que le fichier réellement exécuté soit illisible. Cet outil autonome n'en génère volontairement pas, car il est destiné à une réduction ponctuelle rapide plutôt qu'à un déploiement en production ; tout ce qui va dans un vrai pipeline de build devrait passer par un bundler qui émet une source map correspondante avec lui.

Questions fréquentes

Mon code est-il envoyé à un serveur ?

Non. Terser est téléchargé dans votre navigateur et s'y exécute — la minification se fait entièrement sur votre appareil. Le code propriétaire ou interne ne quitte jamais votre machine, ce qui n'est pas vrai de tous les minifieurs en ligne.

La minification peut-elle casser mon code ?

Pas quand elle est faite correctement — Terser analyse votre code en un véritable arbre syntaxique plutôt que de faire de la correspondance de motifs sur du texte, si bien que la sortie transformée se comporte de façon identique à l'original pour la grande majorité du code. Le seul cas limite réel : du code qui inspecte sa propre source à l'exécution, par exemple en appelant `Function.prototype.toString()` sur une fonction et en analysant le résultat, ou en s'appuyant sur le nom d'une variable ou d'une fonction en tant que chaîne (certains motifs d'injection de dépendances font cela). Le renommage change les noms, donc ce type d'introspection peut voir des noms différents après minification. C'est rare, mais bon à savoir si votre code fait quelque chose d'inhabituel avec la réflexion.

La sortie minifiée est-elle toujours du JavaScript valide et exécutable ?

Oui. La sortie est du JavaScript ordinaire — simplement plus court. Vous pouvez le déposer directement dans une balise `<script>` ou dans une sortie de build exactement comme le fichier d'origine.

Quand devrais-je réellement utiliser cet outil ?

Pour des bundles de production, un script intégré quelque part avec une contrainte de taille (une extension de navigateur, un script de suivi, un widget limité en taille), ou un fichier ponctuel que vous devez réduire rapidement sans mettre en place une étape de build. Vous ne devriez pas minifier vos fichiers source ou de développement — gardez-les lisibles, et minifiez uniquement la sortie de build finale, comme le ferait un bundler.

Pourquoi le résultat est-il illisible ?

C'est le but. Les espaces, les commentaires et les noms de variables longs existent pour les humains qui lisent la source, pas pour le moteur JavaScript qui l'exécute. Les retirer (et raccourcir les noms, si le renommage est activé) réduit le nombre d'octets envoyés sur le réseau sans changer ce que fait le code.