JavaScript-Minifizierer & Formatierer

Was ist dieses Tool?

Ein JavaScript-Minifizierer schreibt Code so um, dass er so klein wie möglich wird, sich aber identisch verhält: Er kürzt Variablen- und Funktionsnamen, wo es sicher ist, entfernt Kommentare und Leerzeichen, faltet Konstanten und beseitigt unerreichbaren Code.

Dieses Tool basiert auf Terser, dem AST-basierten Minifizierer, der von webpack, Vite, Rollup und den meisten modernen JavaScript-Build-Tools verwendet wird. Da es Ihren Code tatsächlich parst statt Text abzugleichen, unterscheidet es korrekt einen Divisionsoperator von einem Regex-Literal, zerstört keine Template-Strings, die //-ähnliche Sequenzen enthalten, und benennt keine Variable in einen Namen um, der mit etwas im äußeren Scope kollidiert.

Warum sollte man es nutzen?

• AST-basierte Minifizierung (Terser), dieselbe Engine, die auch von großen Bundlern verwendet wird — sicher bei Regex-Literalen, Template-Strings und Closures.
• Verkürzt Variablennamen für echte Größenersparnis, nicht nur das Entfernen von Leerzeichen.
• Sehen Sie genau, wie viele Bytes und wie viel Prozent Sie eingespart haben.
• Der Formatier-Modus verwandelt verschleierten, einzeiligen minifizierten JS-Code zurück in lesbaren, eingerückten Code — nützlich, um Third-Party-Skripte zu verstehen.
• 100 % lokale Verarbeitung — proprietärer Code verlässt niemals Ihren Browser.

Anleitung

1. Fügen Sie Ihr JavaScript in das Eingabefeld ein oder klicken Sie auf „Beispiel laden“, um ein Beispiel mit einem Regex-Literal und einem Template-String auszuprobieren.
2. Klicken Sie auf „Minifizieren“, um es zu komprimieren, oder auf „Formatieren“, um es mit 2-Leerzeichen-Einrückung zu verschönern.
3. Beachten Sie die Meldung unter den Feldern — der Minify-Modus zeigt die Größenreduzierung; ein Syntaxfehler in Ihrem Code zeigt eine klare Meldung, statt stillschweigend ein kaputtes Ergebnis zu erzeugen.
4. Klicken Sie auf „Kopieren“, um das Ergebnis zu übernehmen.

Beispiel

Eingabe

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Ausgabe

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Variablennamen werden verkürzt, der Kommentar und die if-Anweisung werden zu einem Ausdruck zusammengefasst, aber das Regex-Literal und der Template-String bleiben exakt erhalten, und das Verhalten ändert sich nicht.

Praktische Tipps

• Minifizieren Sie zur Build-Zeit, nicht per Hand — halten Sie lesbaren Quellcode in der Versionskontrolle und erzeugen Sie das minifizierte Bundle als Build-Schritt.
• Verhält sich minifizierter Code unerwartet, prüfen Sie auf Code, der auf Function.prototype.name oder Reflection setzt — Namensverkürzung benennt Funktionen um, was in seltenen Randfällen sichtbar werden kann.
• Ein Third-Party-Skript vor dem Lesen zu formatieren ist deutlich schneller, als zu versuchen, eine einzelne 2.000 Zeichen lange Zeile zu parsen.
• Kombinieren Sie es mit den unten stehenden HTML- und CSS-Minifizierern, wenn Sie ein komplettes statisches Bundle für das Deployment vorbereiten.

Wo dies in reale Workflows passt

JavaScript ist meist die größte render- oder parse-blockierende Ressource auf einer Seite, daher hat das Minifizieren einen realen, messbaren Effekt auf die Ladezeit — mehr als HTML oder CSS Byte für Byte. Die meisten modernen Frameworks erledigen dies automatisch zur Build-Zeit, aber handgeschriebene Skripte, Browser-Erweiterungen und Bookmarklets werden oft unminifiziert ausgeliefert, sofern nicht jemand sie durch ein Tool wie dieses laufen lässt.

Die Formatier-Richtung wird üblicherweise andersherum genutzt: Das Debuggen eines Produktionsfehlers aus einem minifizierten Stack-Trace wird viel einfacher, sobald der umgebende Code neu formatiert und lesbar ist, selbst ohne die Original-Variablennamen.

→ HTML-Minifizierer · CSS-Minifizierer

Häufige Anwendungsfälle

• Ein eigenständiges Skript oder Bookmarklet vor der Veröffentlichung verkleinern.
• Ein minifiziertes Skript aus einer Live-Website neu formatieren, um zu verstehen, was es tut.
• JavaScript bereinigen, das aus einem Forenbeitrag oder KI-generierten Snippet eingefügt wurde, bevor es sorgfältig gelesen wird.
• Schnell prüfen, ob ein handgeschriebenes JS-Snippet einen Syntaxfehler enthält, da ein Parsing-Fehler als explizite Meldung erscheint.

Häufig gestellte Fragen