Minificateur CSS / JS

Collez une feuille de style ou un script pour supprimer les commentaires et les espaces et l'alléger. Vous voyez la taille avant et après, et les erreurs de syntaxe sont signalées avec leur ligne et leur colonne.

Langage

ENTRÉE

0 caractère0 ligne

SORTIE

Tout se passe dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à un serveur.

Comment minifier du CSS ou du JavaScript

  1. Choisissez CSS ou JavaScript

    Choisissez le langage, ou ouvrez un fichier .css ou .js : il est sélectionné automatiquement.

  2. Collez le code

    Le code minifié et le gain s'affichent pendant que vous tapez. Corrigez les éventuelles erreurs signalées par le message.

  3. Copiez ou téléchargez

    Copiez le résultat ou téléchargez-le sous forme de fichier .min.css ou .min.js.

Ce qui est supprimé

Pour le CSS : les commentaires, les espaces superflus, le dernier point-virgule de chaque bloc et les règles vides. Les nombres perdent leurs zéros inutiles (0.50 devient .5) et les couleurs comme #FFFFFF deviennent #fff. Les sélecteurs et l'imbrication sont conservés, et les valeurs des propriétés personnalisées ne perdent que leurs espaces superflus. Le JavaScript est compressé avec la bibliothèque open source Terser, qui raccourcit aussi les noms des variables locales si vous l'autorisez.

Gardez un original lisible

Le code minifié est fait pour la mise en ligne, pas pour être modifié. Gardez l'original dans votre projet et minifiez une copie, idéalement au moment du build. Les commentaires qui commencent par /*! sont des mentions de copyright : ils sont conservés, sauf si vous désactivez cette option.

Questions fréquentes

La minification peut-elle casser mon code ?

Le minificateur CSS ne supprime que ce qui ne peut pas changer l'application des styles. Terser est très utilisé dans les outils de build, mais du code qui dépend des noms de fonctions ou qui lit son propre code source peut se comporter différemment quand les noms sont raccourcis. En cas de doute, décochez Raccourcir les noms de variables.

Le JavaScript moderne est-il pris en charge ?

Oui. Les classes, le chaînage optionnel, les fonctions async et les modules avec import et export sont pris en charge. Le code qui utilise await au premier niveau est minifié comme un module.

Mon code est-il envoyé quelque part ?

Non. Les deux minificateurs fonctionnent dans votre navigateur. Le minificateur JavaScript est téléchargé la première fois que vous minifiez du JavaScript.