Formater ou minifier du JavaScript

JavaScript Beautifier & Minifier

Retire commentaires et espaces d’un JavaScript ou d’un TypeScript sans rien renommer, et réindente un bundle minifié pour qu’il redevienne lisible.

Met en forme du JavaScript ou du TypeScript minifié pour que vous puissiez le lire, et retire commentaires et espaces quand vous le voulez plus petit. Il est bâti sur un analyseur lexical et non sur un analyseur syntaxique, et cette frontière est ce qu'il y a d'honnête chez lui : rien n'est renommé, aucune expression n'est réécrite, et rien à l'intérieur d'une chaîne, d'un gabarit ou d'une regex n'est touché.

🔒 Fonctionne entièrement dans votre navigateurjavascriptformatminifybeautify

Mode

Indentation

} else { sur une seule ligne

Garder les lignes vides

JavaScript · TypeScript en entrée

Déposez un fichier .js ou .ts

Lu dans cet onglet seulement. Rien n’est envoyé.

Formaté

// Code squashed onto one line, or with the indentation all over the place
const items = [{ id: 1, name: "Kim Jiwon" }, { id: 2, name: "Lee Seojun" }];
function total(xs) {
  let sum = 0;
  for (const x of xs) {
    sum += x.id
  }
  return sum
}
const re = /\/api\/v1/g;
const path = "/api/v1/users".replace(re, "/v2")
export const summary = `${items.length} items, total ${total(items)}`
if (path.includes("v2")) {
  console.log(summary)
} else {
  throw new Error("that is a different path")
}

Jetons

109

Lignes

Honnêtement : c’est un tokeniseur, pas un analyseur syntaxique

· Le tokeniseur distingue exactement les littéraux d’expression régulière de la division, sait quoi faire de ${ {a:1}.a } dans un littéral de gabarit, et reconnaît un // dans une chaîne. Rien de ce qui se trouve dans une chaîne, un gabarit ou une expression régulière n’est donc touché.
· Minifier ne supprime que les commentaires et les blancs. Rien n’est renommé, aucune expression n’est réécrite, et les sauts de ligne dont dépend l’insertion automatique de point-virgule sont conservés — après return, avant un ++ postfixé, et là où la ligne suivante commence par ( ou [. Cela ne descendra pas aussi bas que Terser, et cela ne changera pas non plus le comportement.
· Mettre en forme repère les limites d’instruction à la profondeur des accolades et des crochets et aux ;, réindente, et laisse les sauts de ligne déjà présents. Cela n’insère pas de point-virgule, ne replie pas les lignes longues, et ne sait pas distinguer un littéral objet d’un bloc : les deux reçoivent donc une entrée par ligne.
· Les génériques TypeScript comme Map<string, T> et une comparaison comme a < b sont distingués en regardant les jetons alentour. JSX n’est pas géré.
· Assez pour rendre lisible un bundle obscurci ; pour du code que vous êtes sur le point de valider, le bon outil est Prettier.

Pour retrouver la position d’origine derrière une trace de pile minifiée, utilisez le Résolveur de source map.

Comment s’en servir

Collez le code ou déposez un fichier
Un bundle sur une seule ligne, un fichier à l'indentation mélangée, du TypeScript avec des génériques — tout se lit de la même façon. Le fichier est lu dans cet onglet.
Choisissez Formater ou Minifier
Formater réindente selon la profondeur des accolades et laisse vos sauts de ligne existants tranquilles. Minifier retire les commentaires et les espaces, et rien d'autre, en gardant les en-têtes de licence `/*!` si vous le demandez.
Surveillez la vérification du flux de jetons
Les jetons significatifs de la sortie sont comparés à ceux de l'entrée à chaque passage. S'ils diffèrent, la page le dit en rouge et vous dit d'utiliser votre entrée à la place — le seul mode de défaillance qui ne doit jamais être silencieux.

Questions fréquentes

Pourquoi mon fichier minifié est-il encore plus gros que celui de Terser ?

Parce qu'ici, seuls les commentaires et les espaces sont supprimés. Terser analyse le programme et peut renommer les variables locales, replier les constantes et supprimer les branches mortes ; cela demande un AST et une analyse de portées, et se tromper subtilement sur l'un ou l'autre change le comportement. Le compromis ici, c'est un gain plus faible qui ne peut pas casser votre code.

La minification casse-t-elle l'insertion automatique des points-virgules ?

Non — les sauts de ligne dont dépend l'ASI sont conservés : après un `return`, avant un `++` postfixé, et là où la ligne suivante commence par `(` ou `[`. Ce sont précisément les endroits où supprimer un saut de ligne change ce que fait le programme.

Pourquoi mon littéral d'objet ressort-il avec une propriété par ligne ?

Parce qu'un analyseur lexical ne peut pas distinguer un littéral d'objet d'un bloc — les deux sont `{`. Tout ce qui se trouve à une profondeur d'accolade reçoit le même traitement. Un analyseur syntaxique ferait la différence ; ceci, délibérément, n'en est pas un.

Gère-t-il le JSX ?

Non. Le JSX demande l'analyseur syntaxique qu'il n'a pas — `<Foo>` est indiscernable d'une comparaison au niveau des jetons, et l'heuristique des génériques qui s'en sort avec `Map<string, T>` est déjà la limite de ce que deviner permet. Utilisez Prettier pour un fichier `.tsx`.

Puis-je m'en servir à la place de Prettier ?

Pour lire un bundle obfusqué, oui — c'est à cela qu'il sert. Pour du code que vous êtes sur le point de committer, non : il n'insère pas de points-virgules, ne coupe pas les longues lignes et n'a aucune opinion sur les listes d'arguments. Prettier réimprime à partir d'un AST, ce qui lui permet de le faire.

À alimenter depuis

Formater ou minifier du HTML

HTML Beautifier & Minifier

Met en forme ou minifie du HTML en préservant les éléments en ligne, avec réduction facultative des espaces.

Fonctionne entièrement dans votre navigateur

Formater ou minifier du CSS

CSS Beautifier & Minifier

Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.

Fonctionne entièrement dans votre navigateur

Résolveur de source map

Source Map Resolver

Ramène une trace d’appels minifiée à ses fichiers et ses lignes d’origine à l’aide de la source map que vous fournissez.

Fonctionne entièrement dans votre navigateur

Inspecteur WebAssembly

WebAssembly Inspector

Liste les imports, les exports, la mémoire et la taille des sections d’un module .wasm et en imprime le format texte.

Fonctionne entièrement dans votre navigateur

Ensuite

Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.

Capture de code en image

Code Screenshot

Rend un extrait de code en image avec coloration syntaxique, cadre de fenêtre et thème au choix.

Fonctionne entièrement dans votre navigateur

Formater ou minifier du CSS

CSS Beautifier & Minifier

Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.

Fonctionne entièrement dans votre navigateur

Formater ou minifier du HTML

HTML Beautifier & Minifier

Met en forme ou minifie du HTML en préservant les éléments en ligne, avec réduction facultative des espaces.

Fonctionne entièrement dans votre navigateur

Résolveur de source map

Source Map Resolver

Ramène une trace d’appels minifiée à ses fichiers et ses lignes d’origine à l’aide de la source map que vous fournissez.

Fonctionne entièrement dans votre navigateur

Encodeur et décodeur Base64

Base64 Encoder & Decoder

Encode et décode en Base64 et en Base64URL, pour du texte comme pour des fichiers, avec un traitement correct de l’UTF-8.

Fonctionne entièrement dans votre navigateur

curl vers code

curl to Code

Traduit une commande curl en fetch, axios, requests Python, Go, PHP ou PowerShell.

Fonctionne entièrement dans votre navigateur