Formateur et minifieur JavaScript

Formatez un script pour le lire ou minifiez-le pour le livrer. Les moteurs — Prettier 3.9.6 pour le formatage, Terser 5.44.0 pour la minification — sont servis par ce site et s'exécutent dans le navigateur : l'extrait ne quitte pas la page.

Fonctionne localement dans votre navigateur

Formater ou minifier du JavaScript dans le navigateur

Format réécrit un extrait pour qu'une personne le lise, Minify le réécrit pour que le serveur envoie moins d'octets. Le formatage passe par Prettier 3.9.6, la minification par Terser 5.44.0 ; les deux moteurs sont servis depuis le dossier /static/vendor de ce site et travaillent uniquement sur le texte présent dans l'onglet.

Le sélecteur d'indentation ne concerne que Format : tabulation, 2, 4 ou 8 espaces, 4 par défaut. Le formatage laisse le programme intact — il change les guillemets, les espaces et les retours à la ligne. La minification compresse en plus les expressions et raccourcit les noms locaux : son résultat se teste comme tout code réécrit.

  1. Collez le script dans la zone de texte. Le balisage fonctionne aussi : si le premier caractère visible est <, c'est le formateur HTML de la page qui prend le relais.
  2. Choisissez l'indentation — tabulation, 2, 4 ou 8 espaces — puis cliquez sur Format pour obtenir un code lisible.
  3. Cliquez sur Minify pour la version compacte. La ligne sous le résultat indique la taille, par exemple « 128 → 77 caractères · 40 % de moins ».
  4. Copiez le résultat avec Copy et videz la zone avec Clear. Si le script ne peut pas être analysé, le message du moteur remplace le résultat et indique la ligne et la colonne.

Le moteur derrière chaque bouton et ce qu'il modifie dans le code

Ce que Format change dans un extrait

Prettier analyse le script puis le réimprime dans un style unique : les chaînes reviennent entre guillemets doubles, les points-virgules manquants sont ajoutés, l'indentation choisie est appliquée et les lignes de plus de 80 colonnes sont coupées. Une fonction de 300 instructions est revenue instruction par instruction, commentaires compris : seule la mise en page a changé.

Comme l'impression passe par un analyseur, le résultat reste prévisible ailleurs : ce qui est formaté ici s'analyse aussi dans Node.js ou un bundler, et ce qui échoue échoue là-bas pour la même raison. Les erreurs sont celles de l'analyseur, par exemple « Unexpected token (1:8) » avec la ligne pointée — c'est ce que renvoie const x: number = 1, faute du greffon TypeScript dans l'analyseur babel.

Ce que Minify modifie, et ce qu'il faut retester

Terser effectue une passe de compression et raccourcit les noms à l'intérieur des fonctions ; les noms de premier niveau sont conservés, donc une fonction exportée garde le nom que les autres modules importent. Les commentaires disparaissent, sauf les bandeaux qui commencent par /*! ou contiennent @license. Le repliement des constantes va plus loin : une fonction de 300 lignes qui additionnait 299 constantes est revenue en « function longName(n,e){return n+e+299} », de 11 534 caractères à 38.

Le code minifié n'est donc plus votre source. Le contenu des chaînes et des gabarits est préservé, les champs privés de classe, le chaînage optionnel et les littéraux BigInt traversent la passe, et un gabarit sans substitution peut revenir sous forme de chaîne simple. Exécutez le fichier minifié une fois avant de le livrer ; la ligne de taille montre ce que la passe a apporté.

Syntaxe moderne et limites des analyseurs

Le formatage comprend JSX, la ligne shebang, les attributs d'import comme import data from "./d.json" with { type: "json" } et le await de premier niveau. La minification analyse d'abord l'extrait comme script classique, puis réessaie comme module ES en cas d'échec : import, export et le await de premier niveau passent donc, tandis que des constructions propres au mode non strict comme with gardent la voie script. Si les deux tentatives échouent, le message affiché est celui qui a progressé le plus loin dans le fichier.

Deux limites valent la peine d'être connues avant de coller. Les annotations TypeScript ne font pas partie de l'analyse : const x: number = 1 ressort en erreur de syntaxe au lieu d'une ligne formatée. Et Terser n'analyse pas le JSX : un composant JSX se formate mais refuse d'être minifié, avec « Unexpected token: operator (<) (line 1, column 19) » qui pointe la première balise — minifiez donc un build transpilé.

Téléchargements, vitesse et confidentialité

Le premier clic sur Format télécharge trois fichiers de ce site — Prettier standalone et les greffons babel et estree, environ 600 Ko — et le premier clic sur Minify télécharge le paquet Terser, environ 1 Mo. Ensuite c'est le cache du navigateur : les clics suivants ne déclenchent aucune requête et la page continue de fonctionner réseau coupé.

Un module de 68 Ko contenant 500 fonctions exportées a été formaté en 250 ms environ et minifié en 230 ms environ dans Chrome sur ordinateur. Rien de ce que vous collez n'est envoyé : les seules requêtes de l'outil concernent ses propres fichiers moteur, et le texte source, l'arbre syntaxique et le résultat restent dans l'onglet.

Outils récents :