Füge CSS oder JavaScript ein und wechsle zwischen zwei Aufgaben: Formatieren rückt den Code mit einheitlichen Abständen und einer Anweisung pro Zeile neu ein, Minifizieren entfernt Kommentare und überflüssigen Leerraum und meldet genau, wie viele Bytes du gespart hast. Der Minifizierer ist bewusst konservativ — er benennt nie Bezeichner um, entfernt nie ein Semikolon und führt nie zwei Zeilen zusammen, wo die automatische Semikolon-Einfügung die Bedeutung ändern könnte —, damit das Ergebnis weiterhin läuft. Zeichenketten, Template-Literale, reguläre Ausdrücke und Lizenz-Banner (/*! … */) bleiben unangetastet.
So formatierst oder minifizierst du deinen Code
- 1 Wähle die Sprache: CSS oder JavaScript.
- 2 Füge deinen Code in das linke Feld ein.
- 3 Wähle Formatieren zum Einrücken oder Minifizieren zum Komprimieren.
- 4 Prüfe den Größenbericht und kopiere das Ergebnis oder lade die Datei herunter.
Wie der Formatierer deinen Code liest
Hier gibt es weder Parser noch abstrakten Syntaxbaum. Der Formatierer ist eine zeichenweise Zustandsmaschine, die jederzeit weiß, ob sie sich gerade in einer Zeichenkette, einem Template-Literal, einem Kommentar oder einem regulären Ausdruck befindet. Genau dieser eine Kontext trennt einen Formatierer von einem naiven Suchen-und-Ersetzen: Ohne ihn würde ein Semikolon in einer Zeichenkette als Anweisungsende gelten, und die URL in einem Kommentar bräche beim Minifizieren zusammen.
Verschönern rückt den Code neu ein und vereinheitlicht Abstände um Klammern, Blöcke und Deklarationen. Minifizieren entfernt Kommentare und jede bedeutungslose Folge von Leerraum. Der Minifizierer ist bewusst konservativ: Er benennt nie Bezeichner um, entfernt nie Semikolons und fügt nie zwei Zeilen zusammen, wo JavaScripts automatische Semikolon-Einfügung die Bedeutung ändern könnte. Er tauscht ein paar Bytes gegen die Zusage, dass das Ergebnis noch läuft.
Diese Zurückhaltung ist der ehrliche Preis des Ansatzes. Ein echter Build-Minifizierer wie Terser oder esbuild zerlegt den Code in einen Syntaxbaum und kann Variablennamen kürzen, unerreichbare Zweige entfernen und Ausdrücke umschreiben — und erreicht damit eine weit kleinere Ausgabe, als hier möglich ist. Dieses Tool ist für die schnelle Arbeit im Browser-Tab gedacht, nicht für deine Produktionskette.
Wann du dazu greifst
Minifizierten Code lesen
Ein einzeiliges Fremdskript wird navigierbar. Die Namen bleiben verstümmelt — diese Information wurde beim Build zerstört —, aber Struktur, Kontrollfluss und Zeichenketten werden lesbar.
Geerbten Code aufräumen
Eine Datei mit gemischten Tabs und Leerzeichen und uneinheitlichen Klammern wird in einem Durchgang einheitlich, sodass der anschließende Diff zeigt, was sich wirklich geändert hat, statt jede Zeile.
Einen Inline-Schnipsel kürzen
Ein kleiner CSS-Block für eine E-Mail-Vorlage oder den Seitenkopf rechtfertigt keinen Build-Schritt. Ihn hier zu minifizieren entfernt Kommentare und Leerraum in Sekunden.
Code zum Einfügen vorbereiten
Vor dem Einfügen in Dokumentation, ein Ticket oder einen Chat zu formatieren macht den Code für die nächste Person lesbar.
Formatieren zum Lesen, minifizieren zum Ausliefern
Formatieren brauchst du, wenn du ein Stylesheet ohne Zeilenumbrüche erbst, einen aus einem minifizierten Bundle kopierten Ausschnitt liest oder einen unformatiert eingecheckten Diff durchgehst. Minifizieren ist der umgekehrte Auftrag: einem kleinen Skript oder Inline-Style vor dem Ausliefern ein paar Bytes abringen. Proprietären Code in einen Online-Formatierer zu kopieren heißt, ihn einem fremden Server zu überlassen — dieses Tool läuft vollständig auf deinem Rechner, sodass Kundenarbeit, interne Werkzeuge und unveröffentlichte Features bei dir bleiben.
Was dieses Tool nicht ist
Ein Formatierer ohne Parser hat echte Grenzen, und etwas anderes zu behaupten würde deine Zeit verschwenden:
- Es ist kein Prettier. Es vereinheitlicht Einrückung und Abstände, bricht aber keine langen Zeilen neu um, erzwingt keine Druckbreite und setzt keine Meinungsregeln zu Anführungszeichen und abschließenden Kommas durch.
- Es ist kein Produktions-Minifizierer. Kein Umbenennen von Bezeichnern, keine Entfernung toten Codes, kein Tree Shaking. Rechne mit einer größeren Ausgabe als bei esbuild oder Terser — oft deutlich größer.
- Nur CSS und JavaScript. Es verarbeitet weder HTML, JSON, TypeScript-Typannotationen, JSX, SCSS noch Less-Syntax.
- Es kann kaputten Code nicht reparieren. Formatierung setzt syntaktisch gültige Eingabe voraus; stark unausgeglichene Klammern liefern schlecht eingerückte Ausgabe statt einer Fehlermeldung.
- Verschönern holt verlorene Namen nicht zurück. Minifizierte Variablen namens a, b und c bleiben es — die ursprünglichen Namen stehen schlicht nicht mehr in der Datei.
Fehlerbehebung
- Der verschönerte Code hat weiterhin einbuchstabige Variablennamen
- Diese Namen sind alles, was die ursprüngliche Minifizierung überlebt hat. Umbenennen verwirft die Quellnamen endgültig, und kein Formatierer kann sie zurückerfinden. Veröffentlicht das Projekt Source Maps, führt nur dieser Weg zum Originalcode.
- Meine minifizierte Ausgabe ist größer als erwartet
- Dieser Minifizierer entfernt nur Kommentare und Leerraum, weil er den Code nicht parst und ihn deshalb nicht gefahrlos umschreiben kann. Für echte Größenreduktion setze esbuild oder Terser in deinem Build ein: Sie schaffen typischerweise ein Vielfaches, und ihre Ausgabe ist abgesichert, weil sie den Code tatsächlich verstehen.
- Die Formatierung sieht in einem Abschnitt falsch aus
- Meist unausgeglichene Klammern weiter oben in der Datei oder eine Konstruktion, die die Zustandsmaschine anders liest — ein regulärer Ausdruck mit einer Klammer darin ist der klassische Fall. Prüfe, ob die Eingabe gültig ist; bleibt das Problem, formatierst du diesen Abschnitt besser von Hand.
Häufige Fragen
Kann Minifizieren mein JavaScript kaputt machen?
Es ist so gebaut, dass das nicht passiert. Bezeichner werden nie umbenannt, Semikolons nie entfernt, und ein Zeilenumbruch fällt nur weg, wenn die automatische Semikolon-Einfügung nicht greifen kann. Du gibst ein paar Bytes gegenüber einem weit größeren Werkzeug auf und bekommst dafür die Garantie, dass der Code weiterhin läuft.
Wie viel kleiner wird meine Datei?
Typischerweise 20–50% bei kommentiertem, gut eingerücktem Quelltext. Der Bericht unter der Ausgabe zeigt die exakte Größe vorher und nachher in Bytes samt gespartem Prozentsatz.
Wird mein Code an einen Server gesendet?
Niemals. Der Formatierer ist JavaScript in deinem Browser: Dein Code bleibt auf deinem Gerät und das Tool funktioniert auch offline.
Soll ich das statt Prettier in meinem Projekt einsetzen?
Nein. Wenn du einen Build-Schritt hast, nimm Prettier oder den Formatierer deines Editors: Sie parsen den Code richtig, erzwingen einen einheitlichen Stil im ganzen Team und laufen automatisch. Dieses Tool existiert für den Fall, dass du einen Schnipsel im Browser-Tab und kein Projekt drumherum hast.
Ist das Minifizieren hier produktionstauglich?
Die Ausgabe läuft gefahrlos — der Minifizierer ist gerade deshalb konservativ, damit er deinen Code nicht kaputt machen kann. Er ist nur bei der Größe nicht konkurrenzfähig. Nimm ihn für einen Inline-Schnipsel; nimm einen echten Bundler für alles, was du im großen Stil ausspielst.
Unterstützt es TypeScript, JSX oder SCSS?
Nein. Es verarbeitet reines CSS und reines JavaScript. Typannotationen, JSX-Elemente und SCSS-Verschachtelung nutzen Syntax, die die Zustandsmaschine nicht abbildet — die Ergebnisse wären unzuverlässig.