OnlineConverTools
Se connecter

Minificateur de code

Minifiez du JS, du CSS, du HTML, du TypeScript, du XML, du JSON et du SQL

À propos de l’outil Minificateur de code

L’outil Minificateur de code réduit sept sortes de code dans votre navigateur, choisies avec les boutons JS, TS, CSS, HTML, XML, JSON et SQL. Le JavaScript passe par Terser, qui renomme les variables locales et retire le code mort ; le TypeScript est d’abord débarrassé de ses types par Sucrase, puis minifié de la même façon : le résultat est donc du JavaScript. Le CSS passe par CSSO, qui fusionne les règles identiques et raccourcit les valeurs. Le HTML perd ses commentaires, chaque suite d’espaces devient une seule espace, et le contenu de <pre>, <textarea>, <script> et <style> reste tel qu’il est écrit. Le XML perd ses commentaires et les espaces entre les balises ; le JSON perd ses espaces, ses commentaires et ses virgules finales ; le SQL perd ses commentaires et ses espaces en trop, sans toucher à ses chaînes. Un CSS ou un HTML incorrect n’est pas signalé.

Exemple

Mode HTML : le commentaire disparaît, les espaces se réduisent à une seule, <pre> garde ses espaces.

Entrée

<ul>
  <!-- main menu -->
  <li><a href="/">Home</a></li>
  <li>   About   us </li>
</ul>
<pre>  keep   this</pre>

Sortie

<ul> <li><a href="/">Home</a></li> <li> About us </li> </ul> <pre>  keep   this</pre>

Comment minifier du JavaScript, du CSS ou du HTML

  1. 1Cliquez sur « JS », « TS », « CSS », « HTML », « XML », « JSON » ou « SQL » pour choisir le langage.
  2. 2Collez le code dans « Entrée », ou cliquez sur « Ouvrir un fichier » pour charger un fichier .js, .ts, .css, .html, .xml, .json ou .sql (ou encore .mjs, .cjs, .mts, .cts, .htm, .svg, .xsl, .xsd, .jsonc ou .geojson) ; son extension choisit le langage.
  3. 3Cliquez sur « Minifier » ; le résultat s’affiche dans « Sortie » et la ligne en dessous donne le nombre de caractères économisés.
  4. 4Cliquez sur « Copier », ou sur « Télécharger » pour enregistrer minified.js, minified.ts, minified.css, minified.html, minified.xml, minified.json ou minified.sql, selon le mode.

Formats et limites

Langages d’entrée
JavaScript, TypeScript sans JSX, CSS, HTML, XML, JSON (commentaires et virgules finales acceptés), SQL
Moteurs
Terser (JavaScript et TypeScript), Sucrase (types TypeScript), CSSO (CSS), les minificateurs du site (HTML, XML, JSON, SQL)
Erreurs
Les erreurs de syntaxe JavaScript, TypeScript et JSON s’affichent sous la forme « Erreur : » suivie du message du moteur ; le TSX et les espaces de noms qui contiennent du code sont refusés avec un message qui en donne la raison ; le XML et le SQL sont refusés, avec la ligne, quand une balise, un commentaire, une chaîne ou un nom entre guillemets n’est pas fermé, ou quand une balise fermante ne correspond pas ; le CSS et le HTML ne sont jamais refusés
Nom du fichier
minified suivi du mode : .js, .css, .html, .xml, .json ou .sql ; en mode TS, le fichier s’appelle .ts alors qu’il contient du JavaScript

Où votre code est traité

Les sept minificateurs s’exécutent sur votre appareil ; Terser, Sucrase ou CSSO est téléchargé la première fois que son mode est utilisé, et le code que vous collez n’est pas envoyé. Si une erreur s’affiche, son message, épuré des passages entre guillemets, des nombres longs et des adresses, est envoyé à notre journal des erreurs avec le nom de l’outil ainsi que le nom et la version de votre navigateur.

Questions fréquentes

Le JavaScript minifié se comporte-t-il de la même façon ?

Oui. Terser analyse le code avant de le compresser : du code sans points-virgules, un return suivi d’un retour à la ligne et des expressions comme a - -b gardent leur sens. Un code qui ne peut pas être analysé donne une erreur au lieu d’un fichier cassé.

Le mode TS accepte-t-il le TSX ou les espaces de noms ?

Pas entièrement. Un espace de noms qui ne contient que des types est retiré, comme le fait tsc ; un espace de noms qui contient du code est refusé avec un message qui donne son nom et sa ligne, car retirer les types ne peut pas le transformer en JavaScript : sortez d’abord ce code de l’espace de noms. Le TSX est refusé avec un message qui explique que Terser ne sait pas lire le JSX : compilez-le d’abord dans votre propre outil de construction.

Le mode HTML supprime-t-il tous les espaces entre les balises ?

Non. Une espace entre des éléments en ligne peut être visible : deux mots en gras séparés seulement par un retour à la ligne seraient collés sans elle. Chaque suite d’espaces et de retours à la ligne devient donc une seule espace au lieu de disparaître.

Le mode CSS vérifie-t-il mon CSS ?

Non. CSSO répare ou ignore sans message ce qu’il ne sait pas lire : une accolade fermante manquante est ajoutée, et un texte qui n’est pas du CSS peut disparaître de la sortie. Vérifiez le résultat d’une feuille de style dont vous n’êtes pas sûr.

Le mode SQL garde-t-il mes chaînes et mes indications ?

Oui. Les chaînes, les noms entre guillemets (doubles, obliques ou crochets) et les corps $$ de PostgreSQL sont recopiés tels quels, même quand ils contiennent -- ou /*. Les commentaires partent, sauf les indications /*! */ de MySQL et /*+ */ de l’optimiseur. Un saut de ligne reste après #, qui ouvre un commentaire en MySQL, et autour de DELIMITER, de GO et des commandes \ de psql, là où le retirer changerait le script.

Les modes XML et JSON changent-ils mes données ?

Non. Le XML ne perd que ses commentaires et les espaces entre les balises, jamais dans un élément xml:space="preserve" ni entre les mots d’un contenu mixte, comme <p>Hello <b>big</b> <i>world</i></p> ; le texte, les valeurs d’attribut et les sections CDATA restent tels qu’ils sont écrits. Le JSON perd ses espaces, ses commentaires et ses virgules finales ; les nombres gardent tous leurs chiffres, là où JSON.parse suivi de JSON.stringify change 12345678901234567890 en 12345678901234567000.

Trucs et astuces

  • ✓La ligne des caractères économisés ne s’affiche qu’après une minification réussie ; après une erreur, « Sortie » affiche le message à la place.

Outils associés