Mes outils

Minifier JS et CSS

Collez du code et la version minifiée apparaît au fil de la frappe — avec les caractères économisés.

Mode d’emploi

  1. Collez du JavaScript ou du CSS dans la zone — la version minifiée apparaît au fil de la frappe, aucun bouton à cliquer.
  2. Laissez la syntaxe sur Auto, ou choisissez JavaScript / CSS vous-même si la détection s’est trompée ; le résultat se réaffiche immédiatement.
  3. L’en-tête indique les caractères économisés avant → après. Copiez la sortie ou téléchargez-la sous forme de fichier .js / .css.

Exemple

Saisie

// Total du panier avec le badge livraison offerte
const TAX = 0.08;

function total(items, coupon) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.qty;
  }
  if (coupon) {
    sum -= coupon;
  }
  return { amount: sum * (1 + TAX), freeShipping: sum > 50 };
}

Minifié

const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}

Le commentaire a disparu et les espaces sont réduits, mais chaque identifiant conserve son nom et chaque littéral son orthographe exacte. Le compteur indique 279 → 177 caractères (−37 %).

Règles, limites et problèmes connus

  • Espaces et commentaires uniquement. Rien n’est renommé, aucune instruction n’est repliée et aucun code n’est supprimé — la sortie minifiée se comporte donc comme l’original, mais reste plus volumineuse que ce que produit Terser.
  • Les commentaires commençant par /*! ou //!, ainsi que ceux mentionnant @license ou @preserve, sont conservés ; tous les autres commentaires sont supprimés.
  • Les sauts de ligne restent partout où les supprimer changerait le programme : après return / throw / break / continue / yield / async, et entre deux instructions où JavaScript insérerait automatiquement un point-virgule (a\nb, x={}\nfoo()). La plupart du reste du code tient sur une ligne.
  • Le JavaScript est tokenisé, pas analysé : un « /* » dans une chaîne, une expression régulière ou un littéral de gabarit n’est jamais touché. Division et expressions régulières sont distinguées grâce au jeton précédent ; une regex qui s’étend sur une ligne est traitée comme une division.
  • Le CSS ne perd que les espaces qui ne peuvent rien signifier : autour de { } ; , > ~ ! et après « : », ainsi que le dernier « ; » avant un « } ». Les espaces de descendance restent (.a .b n’est pas .a.b), l’espace avant « : » reste (a :hover n’est pas a:hover), et calc(100% - 10px) conserve ses espaces car ils font partie de la syntaxe.
  • Pas de renommage (mangle), pas de suppression de code mort, pas de drop_console : ces opérations changent le comportement, ce qu’un bouton « minifier » ne devrait pas faire silencieusement.
  • Non pris en charge : HTML/SVG (les espaces y dépendent de <pre>, <textarea> et des éléments en ligne), les réécritures de types TypeScript, l’entrée JSX/TSX, les source maps et la fusion multifichiers. JSX est détecté et signalé par un avertissement.
  • Une chaîne, un gabarit, un commentaire ou un url( non fermé à la fin de la saisie est un avertissement, pas une erreur : le reste du code est tout de même minifié. Les parenthèses ou accolades non appariées sont aussi un avertissement — ce n’est pas un validateur.
  • Les compteurs portent sur les points de code Unicode, pas sur les octets ni les unités UTF-16 ; les pourcentages sont arrondis à l’entier et affichés sous la forme +n % lorsque la sortie grossit. Tout s’exécute dans votre navigateur : rien n’est envoyé, stocké ni ajouté à l’URL.
  • Au-delà de 200 000 caractères, le résultat s’actualise environ 0,6 s après l’arrêt de la frappe ; le texte n’est jamais tronqué. La sortie utilise LF et ne se termine pas par un saut de ligne.

Ce dont on a généralement besoin ensuite, une fois le code allégé.

Formateur de code (embellisseur)

Boîte à outils JSON

Formateur XML