Utilia
Catégories ▾
Langue: fr ▾

Formateur et minificateur JavaScript

Rendez lisible un JavaScript minifié, minifiez-le avec Terser ou vérifiez sa syntaxe avec la ligne et la colonne exactes de l'erreur, dans le navigateur.

Options de minification

Comment formater ou minifier du JavaScript

  1. Collez votre code ou cliquez sur Ouvrir un fichier pour charger un fichier .js, .mjs ou .jsx (10 Mo au maximum).
  2. Choisissez l’Indentation et, si vous préférez le style Allman, cochez Accolades sur leur propre ligne.
  3. Cliquez sur Formater (indenter) pour rendre le code lisible.
  4. Pour l’alléger, réglez les Options de minification puis cliquez sur Minifier. Pour seulement repérer les erreurs, cliquez sur Vérifier la syntaxe.
  5. Copiez ou téléchargez le résultat. La ligne d’état indique la taille avant et après, ainsi que le pourcentage gagné.

Le code est seulement lu et transformé, jamais exécuté : rien de ce que vous collez ne tourne dans cette page.

Indenter avec js-beautify

Formater (indenter) s’appuie sur js-beautify. Il place une instruction par ligne, décale les blocs, ajoute des espaces autour des opérateurs et après les mots-clés, et conserve au plus une ligne vide là où vous en aviez. Il comprend la syntaxe moderne (classes, fonctions fléchées, gabarits de chaînes, async/await) ainsi que le JSX. C’est le moyen le plus rapide de lire une bibliothèque minifiée ou un extrait tenant sur une seule ligne, copié depuis une page web.

L’indentation ne modifie que les espaces. Elle ne vérifie pas que le code est valide : une parenthèse manquante donne simplement une indentation étrange. Pour cela, utilisez Vérifier la syntaxe.

Minifier avec Terser

Minifier utilise Terser, le minificateur employé par la plupart des outils de build JavaScript. Comme il est volumineux, il n’est téléchargé qu’au premier clic sur Minifier ou Vérifier la syntaxe. Les options correspondent directement aux réglages de Terser :

  • Module ES (import/export) analyse le code comme un module (module: true) : le mode strict s’applique et les noms de premier niveau sont privés, ils peuvent donc être renommés, et supprimés s’ils ne servent pas. Laissez la case décochée pour un script classique dont les fonctions globales sont appelées par d’autres scripts.
  • Compresser (compress) réécrit le code sous une forme équivalente plus courte : calcul des constantes (2*60 devient 120), suppression du code mort, regroupement des déclarations var, conditions raccourcies.
  • Raccourcir les noms de variables (mangle) renomme les variables locales et les paramètres en une ou deux lettres. Les noms globaux et les propriétés d’objets ne sont jamais renommés.
  • Garder les commentaires de licence conserve les commentaires qui commencent par /*! ou contiennent @license ou @preserve. Tous les autres commentaires sont supprimés.

La minification ne change pas ce que fait le code, mais un code qui s’appuie sur le nom des fonctions (fn.name) ou sur eval peut se comporter autrement après renommage. Décochez alors Raccourcir les noms de variables.

Erreurs de syntaxe avec ligne et colonne

Quand Terser ne parvient pas à analyser le code, Minifier et Vérifier la syntaxe affichent le message d’erreur avec sa ligne et sa colonne, par exemple « Ligne 12, colonne 8 – Erreur de syntaxe : Unexpected token punc «)» ». Les colonnes sont comptées à partir de 1. L’origine est souvent une parenthèse ou une accolade oubliée plus haut dans le fichier : regardez aussi les lignes qui précèdent la position indiquée.

Questions fréquentes

Mon code est-il envoyé quelque part ?

Non. js-beautify et Terser fonctionnent tous les deux dans votre navigateur, et votre code reste sur votre ordinateur.

Puis-je minifier du TypeScript ?

Non. Terser n’accepte que du JavaScript. Compilez d’abord le TypeScript en JavaScript, puis minifiez le résultat. Formater (indenter) fonctionne souvent sur du TypeScript simple, mais les annotations de type peuvent être mal espacées.

Pourquoi mon code minifié ne ressemble-t-il plus à ce que j'ai écrit ?

Compresser calcule les expressions constantes, remplace les valeurs utilisées une seule fois et supprime le code inaccessible. Le résultat se comporte de la même façon. Décochez Compresser pour ne retirer que les espaces et les commentaires.

L'option « Module ES » doit-elle correspondre à mon code ?

Oui. Un code qui contient import ou export doit être minifié comme un module. À l’inverse, un script classique minifié comme un module risque de perdre des fonctions globales appelées par d’autres scripts, puisque ses noms de premier niveau sont alors considérés comme privés.

Et le JSON ?

Le JSON est du JavaScript valide, les deux boutons l’acceptent donc, mais le formateur JSON dédié donne des messages d’erreur plus précis et sait trier les clés.

Outils similaires