JavaScript formatieren und minimieren

JavaScript Beautifier & Minifier

Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.

Verschönert minimiertes JavaScript oder TypeScript, damit Sie es lesen können, und entfernt Kommentare und Whitespace, wenn Sie es kleiner wollen. Es baut auf einem Tokenizer statt auf einem Parser auf, und diese Grenze ist das Ehrliche daran: Nichts wird umbenannt, kein Ausdruck wird umgeschrieben, und nichts innerhalb eines Strings, Templates oder Regex wird angerührt.

🔒 Läuft vollständig in Ihrem Browserjavascriptformatminifybeautify

Modus

Einrückung

} else { in einer Zeile

Leerzeilen behalten

JavaScript- · TypeScript-Eingabe

.js- oder .ts-Datei hier ablegen

Wird nur in diesem Tab gelesen. Nichts wird hochgeladen.

Formatiert

// 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")
}

Tokens

109

Zeilen

Ehrlich gesagt: Das ist ein Tokenizer, kein Parser

· Der Tokenizer unterscheidet Regex-Literale genau von der Division, weiß umzugehen mit ${ {a:1}.a } in einem Template-Literal und erkennt ein // in einem String. Nichts innerhalb eines Strings, eines Templates oder einer Regex wird also angefasst.
· Minifizieren entfernt nur Kommentare und Leerraum. Es benennt nichts um und schreibt keinen Ausdruck neu, und es behält die Zeilenumbrüche, auf die die automatische Semikolon-Einfügung angewiesen ist — nach return, vor einem nachgestellten ++ und dort, wo die nächste Zeile mit ( oder [ beginnt. So klein wie Terser wird es nicht, aber es ändert auch das Verhalten nicht.
· Formatieren findet Anweisungsgrenzen über die Klammertiefe und über ;, rückt neu ein und lässt die Zeilenumbrüche stehen, die schon da waren. Es fügt keine Semikolons ein, bricht keine langen Zeilen um und kann ein Objektliteral nicht von einem Block unterscheiden, deshalb bekommen beide einen Eintrag pro Zeile.
· TypeScript-Generics wie Map<string, T> und ein Vergleich wie a < b werden anhand der umgebenden Tokens auseinandergehalten. JSX wird nicht behandelt.
· Genug, um ein obfuskiertes Bundle lesbar zu machen; für Code, den Sie gleich committen, ist Prettier das richtige Werkzeug.

Um die ursprüngliche Position hinter einem minifizierten Stacktrace zu finden, nehmen Sie den Source-Map-Auflöser.

So funktioniert es

Fügen Sie den Code ein oder legen Sie eine Datei ab
Ein einzeiliges Bundle, eine Datei mit gemischter Einrückung, TypeScript mit Generics – alles wird gleich gelesen. Die Datei wird in diesem Tab gelesen.
Wählen Sie Formatieren oder Minimieren
Formatieren rückt nach Klammertiefe neu ein und lässt Ihre vorhandenen Zeilenumbrüche in Ruhe. Minimieren entfernt Kommentare und Whitespace und sonst nichts, und behält die `/*!`-Lizenzköpfe, wenn Sie es verlangen.
Achten Sie auf die Token-Stream-Prüfung
Die bedeutungstragenden Tokens der Ausgabe werden bei jedem Durchlauf mit der Eingabe verglichen. Sollten sie je abweichen, sagt die Seite das in Rot und fordert Sie auf, stattdessen Ihre Eingabe zu verwenden – der eine Fehlerfall, der nie still bleiben darf.

Häufige Fragen

Warum ist meine minimierte Datei immer noch größer als die von Terser?

Weil hier nur Kommentare und Whitespace gelöscht werden. Terser parst das Programm und kann lokale Variablen umbenennen, Konstanten falten und tote Zweige entfernen; das erfordert einen AST und eine Scope-Analyse, und wer eines davon auf subtile Weise falsch macht, ändert das Verhalten. Der Handel hier ist eine kleinere Ersparnis, die Ihren Code nicht kaputt machen kann.

Bricht Minimieren die automatische Semikolon-Einfügung?

Nein – die Zeilenumbrüche, von denen ASI abhängt, bleiben erhalten: nach einem `return`, vor einem nachgestellten `++` und dort, wo die nächste Zeile mit `(` oder `[` beginnt. Das sind genau die Stellen, an denen das Entfernen eines Zeilenumbruchs ändert, was das Programm tut.

Warum kommt mein Objektliteral mit einer Property pro Zeile heraus?

Weil ein Tokenizer ein Objektliteral nicht von einem Block unterscheiden kann – beides ist `{`. Alles auf Klammertiefe wird gleich behandelt. Ein Parser wüsste den Unterschied; dies ist absichtlich keiner.

Kommt es mit JSX zurecht?

Nein. JSX braucht den Parser, den dies nicht hat – `<Foo>` ist auf Token-Ebene von einem Vergleich nicht zu unterscheiden, und die Generics-Heuristik, die `Map<string, T>` bewältigt, ist schon die Grenze dessen, was Raten leisten kann. Verwenden Sie Prettier für eine `.tsx`-Datei.

Kann ich das statt Prettier verwenden?

Um ein verschleiertes Bundle zu lesen, ja – dafür ist es da. Für Code, den Sie gleich committen, nein: Es fügt keine Semikolons ein, bricht lange Zeilen nicht um und hat keine Meinung zu Argumentlisten. Prettier gibt aus einem AST neu aus, und deshalb kann es das.

Eingabe aus

HTML formatieren und minimieren

HTML Beautifier & Minifier

Formatiert oder minimiert HTML, bewahrt Inline-Elemente und fasst auf Wunsch Leerraum zusammen.

Läuft vollständig in Ihrem Browser

CSS formatieren und minimieren

CSS Beautifier & Minifier

Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.

Läuft vollständig in Ihrem Browser

Source-Map-Auflöser

Source Map Resolver

Bildet einen minimierten Stacktrace mit einer von Ihnen gelieferten Source Map auf die ursprünglichen Dateien und Zeilen ab.

Läuft vollständig in Ihrem Browser

WebAssembly-Inspektor

WebAssembly Inspector

Listet Imports, Exports, Speicher und Sektionsgrößen eines .wasm-Moduls auf und gibt sein Textformat aus.

Läuft vollständig in Ihrem Browser

Danach

Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.

Code-Screenshot

Code Screenshot

Rendert einen Codeausschnitt als Bild mit Syntaxhervorhebung, Fensterrahmen und wählbarem Theme.

Läuft vollständig in Ihrem Browser

CSS formatieren und minimieren

CSS Beautifier & Minifier

Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.

Läuft vollständig in Ihrem Browser

HTML formatieren und minimieren

HTML Beautifier & Minifier

Formatiert oder minimiert HTML, bewahrt Inline-Elemente und fasst auf Wunsch Leerraum zusammen.

Läuft vollständig in Ihrem Browser

Source-Map-Auflöser

Source Map Resolver

Bildet einen minimierten Stacktrace mit einer von Ihnen gelieferten Source Map auf die ursprünglichen Dateien und Zeilen ab.

Läuft vollständig in Ihrem Browser

Base64 kodieren und dekodieren

Base64 Encoder & Decoder

Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.

Läuft vollständig in Ihrem Browser

curl in Code

curl to Code

Wandelt einen curl-Befehl in fetch, axios, Python requests, Go, PHP oder PowerShell um.

Läuft vollständig in Ihrem Browser