Mon code est-il envoyé quelque part ?

Non. terser, csso et js-beautify s’exécutent dans votre navigateur, votre code reste donc sur votre appareil.

Le JavaScript minifié fonctionnera-t-il toujours ?

Oui. terser n’effectue que des changements qui préservent le comportement. Le code qui dépend des noms de fonctions ou de classes à l’exécution, comme certains frameworks d’injection de dépendances, peut nécessiter de désactiver le raccourcissement des noms.

Le JavaScript moderne et les modules ES sont-ils pris en charge ?

Oui. terser comprend la syntaxe moderne, y compris les classes, async/await, l’optional chaining et le top-level await. Les fichiers contenant import ou export sont minifiés comme des modules ES.

Peut-on minifier du TypeScript ou du JSX ?

Non. Compilez d’abord le TypeScript ou le JSX en JavaScript, puis minifiez le résultat. Si le code n’est pas du JavaScript standard, une erreur de syntaxe avec ligne et colonne s’affiche.

Quelle différence entre minifier et gzip ?

Minifier réécrit le code lui-même pour le raccourcir. Gzip est une compression que le serveur applique à n’importe quel fichier lors de l’envoi. Les deux se complètent : minifiez d’abord, puis laissez le serveur compresser.

Peut-on déminifier du JavaScript ou du CSS ?

Oui. Choisissez Formater pour réindenter le code minifié. Les noms de variables et commentaires d’origine ne peuvent pas être récupérés, mais la structure devient lisible.

Pourquoi mes règles CSS sont-elles fusionnées ou réordonnées ?

C’est la restructuration de csso, qui fusionne les règles ayant les mêmes déclarations ou sélecteurs. Elle est sûre pour des feuilles de style classiques ; désactivez Compresser si vous dépendez d’un ordre précis des règles entre sélecteurs de même spécificité.

Minifier CSS, JS et HTML en ligne + Beautifier

Des fichiers plus légers en production, du code lisible pour déboguer

Ce minificateur réduit CSS, JavaScript et HTML pour la production et vous montre exactement ce que vous gagnez : la taille d’origine, la taille minifiée et la taille après gzip, c’est-à-dire ce que vos visiteurs téléchargent réellement. JavaScript est minifié avec terser, le minificateur utilisé par la plupart des outils de build modernes, et CSS avec csso, qui fusionne aussi les règles en double. Passez en mode Formater pour transformer un bundle ou une feuille de style minifiée en code indenté et lisible. Votre code est traité dans votre navigateur et n’est jamais envoyé.

Comment minifier ou formater du code

1Choisissez le langage : CSS, JavaScript ou HTML. Déposer un fichier .css, .js ou .html dans la zone de saisie le choisit pour vous.
2Choisissez Minifier pour réduire le code ou Formater pour le mettre en forme.
3Réglez les options : pour JavaScript, raccourcir les noms et compresser ; pour CSS, restructurer les règles ; pour HTML, minifier les styles et scripts inline. Les commentaires de licence sont conservés sauf si vous désactivez l’option.
4Consultez les tailles sous le résultat pour voir le gain avant et après gzip.
5Copiez la sortie ou téléchargez-la en .min.js, .min.css ou .html.

Ce que fait la minification

La minification supprime tout ce dont le navigateur n’a pas besoin pour exécuter le code : commentaires, indentation, retours à la ligne et points-virgules facultatifs. Les bons minificateurs vont plus loin. terser renomme les variables locales en une seule lettre (mangling), supprime le code inaccessible, précalcule les expressions constantes et transforme les instructions if en ternaires. csso raccourcit les couleurs (#ff0000 devient red), supprime les unités des valeurs nulles et fusionne les règles aux déclarations ou sélecteurs identiques.

Le résultat se comporte exactement comme l’original, mais il est généralement 30 à 70 % plus léger pour JavaScript et 15 à 40 % pour CSS avant compression.

Pourquoi la taille gzip compte

Les serveurs web et les CDN compressent les fichiers texte avec gzip ou Brotli avant de les envoyer : c’est donc la taille compressée qui influe sur le temps de chargement, pas la taille brute. La compression élimine déjà une bonne partie des répétitions visées par la minification, c’est pourquoi un gain de 60 % à la minification peut tomber à 20 % après gzip. Cela reste utile à chaque affichage de page, et le mangling en particulier continue de payer après compression.

La valeur gzip affichée utilise le niveau 6, celui par défaut de nginx et de la plupart des serveurs. Brotli fait généralement encore 10 à 20 % de mieux.

Les options en détail

Raccourcir les noms: Renomme les variables locales et les paramètres de fonction avec des noms courts. Les noms globaux et les propriétés d’objets ne sont jamais renommés, donc le code appelé par d’autres scripts continue de fonctionner.
Compresser: Pour JavaScript, les passes d’optimisation de terser : suppression du code mort, constant folding, inlining. Pour CSS, la restructuration de csso, qui fusionne et réordonne les règles quand c’est sans risque.
Conserver les commentaires de licence: Conserve les commentaires qui commencent par /*! ou contiennent @license ou @preserve, que de nombreuses licences open source vous obligent à garder.
CSS et JS inline: Dans le HTML, minifie le contenu des éléments <style> et <script> ainsi que les attributs style. Les blocs JSON-LD sont aussi compactés ; les scripts d’autres types ne sont pas modifiés.
Supprimer les guillemets des attributs: Écrit class=nav au lieu de class="nav" quand le HTML le permet. C’est du HTML valide, mais certains outils XML et moteurs de templates ne l’apprécient pas, donc l’option est désactivée par défaut.

Comment le HTML est minifié

La minification HTML est volontairement prudente. Les commentaires sont supprimés, sauf les commentaires conditionnels d’Internet Explorer. Les suites d’espaces sont réduites à un seul espace, et l’espace à côté des éléments de bloc comme <div> et <p>, où il n’est jamais affiché, est supprimé. Un espace est toujours conservé entre éléments inline, car le supprimer collerait <b>big</b> <i>world</i> en un seul mot. Le contenu de <pre> et <textarea> n’est jamais modifié.

Si un script inline contient une erreur de syntaxe, il est laissé tel quel et la ligne concernée vous est indiquée, plutôt que de faire échouer toute la page.

Reformater du code minifié

Formater utilise js-beautify pour réindenter le code : une instruction par ligne en JavaScript, une déclaration par ligne en CSS et une indentation imbriquée en HTML. C’est le moyen le plus rapide de lire un script tiers minifié ou de comprendre une feuille de style copiée depuis le navigateur. Les noms de variables et commentaires d’origine supprimés par le minificateur ne peuvent pas être retrouvés, mais la structure devient facile à suivre.

Pour d’autres formats, voyez le formateur JSON et le formateur SQL.

Questions fréquentes

Mon code est-il envoyé quelque part ?: Non. terser, csso et js-beautify s’exécutent dans votre navigateur, votre code reste donc sur votre appareil.
Le JavaScript minifié fonctionnera-t-il toujours ?: Oui. terser n’effectue que des changements qui préservent le comportement. Le code qui dépend des noms de fonctions ou de classes à l’exécution, comme certains frameworks d’injection de dépendances, peut nécessiter de désactiver le raccourcissement des noms.
Le JavaScript moderne et les modules ES sont-ils pris en charge ?: Oui. terser comprend la syntaxe moderne, y compris les classes, async/await, l’optional chaining et le top-level await. Les fichiers contenant import ou export sont minifiés comme des modules ES.
Peut-on minifier du TypeScript ou du JSX ?: Non. Compilez d’abord le TypeScript ou le JSX en JavaScript, puis minifiez le résultat. Si le code n’est pas du JavaScript standard, une erreur de syntaxe avec ligne et colonne s’affiche.
Quelle différence entre minifier et gzip ?: Minifier réécrit le code lui-même pour le raccourcir. Gzip est une compression que le serveur applique à n’importe quel fichier lors de l’envoi. Les deux se complètent : minifiez d’abord, puis laissez le serveur compresser.
Peut-on déminifier du JavaScript ou du CSS ?: Oui. Choisissez Formater pour réindenter le code minifié. Les noms de variables et commentaires d’origine ne peuvent pas être récupérés, mais la structure devient lisible.
Pourquoi mes règles CSS sont-elles fusionnées ou réordonnées ?: C’est la restructuration de csso, qui fusionne les règles ayant les mêmes déclarations ou sélecteurs. Elle est sûre pour des feuilles de style classiques ; désactivez Compresser si vous dépendez d’un ordre précis des règles entre sélecteurs de même spécificité.

Minificateur et beautifier CSS, JS et HTML

Entrée

Minifié