JavaScript minifizieren _

Wie JavaScript-Minimierung funktioniert

Terser arbeitet in vier Phasen über den abstrakten Syntaxbaum deines Codes. Jede Phase ist unabhängig, sodass du jede davon ein- oder ausschalten kannst, ohne die anderen zu beeinträchtigen.

1. Parsen. Terser parst dein JavaScript in einen AST. Syntaxfehler werden hier mit dem Token und der Zeile, die ihn verursacht hat, angezeigt, sodass du das eigentliche Problem findest, bevor irgendeine Transformation läuft. Der Parser akzeptiert alle Standard-ECMAScript-Konstrukte bis zu den neuesten Stage-4-Vorschlägen.
2. Komprimieren. Der Kompressor durchläuft den AST und wendet Dutzende semantisch-erhaltende Transformationen an: Constant Folding, Dead-Branch-Eliminierung, Inlining kurzer reiner Funktionen, Zusammenfassen aufeinanderfolgender var-Deklarationen und Umschreiben gleichwertiger Anweisungsformen (if/else in ternäre Ausdrücke, Verkürzung von Vergleichsketten, Kollabierung bedingter Returns). Jede Transformation ist prinzipiell umkehrbar; der Kompressor verändert niemals das beobachtbare Verhalten.
3. Mangeln. Der Mangler benennt lokale Bindungen in die kürzesten eindeutigen Bezeichner (a, b, c, …) innerhalb jedes Geltungsbereichs um. Nur Namen, die die Modulgrenzen nicht verlassen können, werden umbenannt — exportierte Bindungen, Property-Keys und globale Referenzen bleiben unberührt. Das ist die größte einzelne Byte-Ersparnis aller Phasen.
4. Ausgeben. Terser gibt den transformierten AST als JavaScript-Zeichenkette aus, mit komprimiertem Leerzeichen und auf das grammatikalisch notwendige Minimum reduzierten Anweisungstrennzeichen. Kommentare werden entfernt, sofern der Lizenz-Schalter nicht /*! … */-Blöcke beibehält, die die meisten CDN-Lizenzen zur Aufnahme verlangen.

Warum JavaScript minifizieren

• Schnellere Seitenladevorgänge. Kleinere Skripte werden schneller geparst und ausgeführt. Bei einer 4G-Mobilverbindung spart eine 40-prozentige Byte-Reduzierung echte Sekunden bei der Time to Interactive — der Metrik, die Googles PageSpeed Insights am aggressivsten misst.
• Niedrigere CDN-Egress-Kosten. CloudFront, Cloudflare und Fastly berechnen pro Gigabyte Egress. Eine 40-prozentige Skriptreduktion über Millionen monatlicher Seitenaufrufe kumuliert zu echten Einsparungen, bevor Bild- oder CSS-Arbeit anfällt. Die Rechnung gilt auch nach gzip und brotli — Minimierung entfernt Token, die der Kompressor sonst kodieren müsste.
• Dieser Minifizierer belastet deine Seite nicht. Terser ist ~1 MB unkomprimiert. Die meisten Online-Minifizierer laden die gesamte Bibliothek beim Seitenaufruf, was ihren eigenen Lighthouse-Score senkt und die Seite träge wirken lässt, bevor der Nutzer etwas tippt. Diese Seite lädt Terser lazy erst dann, wenn du auf Minifizieren klickst oder den Live-Modus einschaltest — das initiale Rendern bleibt damit unter den Core-Web-Vitals-Schwellenwerten, bei deren Erreichung das Tool selbst helfen soll.
• Core Web Vitals bestehen. Lighthouse und PageSpeed Insights kennzeichnen großes JavaScript als direkten Beitrag zu schlechter Total Blocking Time. Das Minifizieren von Vendor-Bibliotheken und Anwendungs-Bundles ist der schnellste Gewinn bei den Lighthouse-Audits "Ungenutztes JavaScript reduzieren" und "Doppelte Module entfernen" — typischerweise eine einmalige Reduzierung von zehn oder zwanzig Punkten.

Häufige Anwendungen

JavaScript-Minimierung taucht an fast jeder Stufe eines modernen Webprojekts auf.

• Pre-Commit-Hooks: individuelle Hilfsskripte vor dem Commit in ein Repo minifizieren, damit das committete Artefakt produktionsreif ist und der Diff logische Änderungen statt Leerzeichen-Fluktuation zeigt.
• Drittanbieter-Widget-Audits: den Einbettungs-Snippet eines Anbieters einfügen und prüfen, ob er bereits minifiziert ist oder weiter verkleinert werden kann, bevor er Millionen von Nutzern bereitgestellt wird.
• Legacy-Skript-Bereinigung: alte jQuery-Plugins und handgeschriebene Skripte, die aus der Zeit vor der aktuellen Build-Pipeline stammen, komprimieren, ohne den Quellcode-Baum zu berühren.

Ein praktisches Beispiel

Nimm eine kleine Funktion: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — etwa 130 Bytes einschließlich des Kommentars. Füge sie oben ein mit aktivierten Mangle- und Compress-Optionen. Die Ausgabe kürzt sich auf etwa function add(n,o){return n+o}console.log(add(1,2)); — etwa 55 Bytes, eine Reduzierung um 58 Prozent. Der Funktionsname add bleibt erhalten, da er im console.log-Aufruf referenziert wird; die Parameternamen firstNumber und secondNumber werden auf einzelne Buchstaben verkürzt, da sie lokal zum Funktionskörper sind. Schalte Mangle aus, um lesbare Parameternamen zu behalten und trotzdem Leerzeichen zu komprimieren und den Kommentar zu entfernen.

FAQ

Läuft das in meinem Browser?

Ja. Terser wird lazy beim ersten Klick auf Minifizieren oder beim Aktivieren des Live-Modus geladen — etwa 200 KB komprimiert landen in deinem Browser-Cache, dann wird nichts weiteres heruntergeladen. Dein Code verlässt die Seite nie.

Was ist Name-Mangling und ist es sicher?

Mangling benennt lokale Variablen in einzelne Buchstaben um, um Bytes zu sparen. Es ist sicher für in sich geschlossene Skripte und IIFE-Bundles, da die Umbenennungen den Geltungsbereich nie verlassen. Es ist NICHT sicher für Skripte, die Globals namentlich exponieren (z. B. window.myLib = …) ohne einen Wrapper. Schalte Mangle aus, wenn du unsicher bist.

Warum ist mein Code nach der Minifizierung kaputt?

Drei übliche Verdächtige: eval oder with, die Variablen als Zeichenkette referenzieren; Function.name- oder arguments.callee-Lesevorgänge, die vom ursprünglichen Bezeichner abhängen; oder Globals, die unter einem umbenannten Namen exponiert werden. Schalte zunächst Mangle aus, um zu isolieren, ob Umbenennung oder eine Compress-Transformation die Ursache ist.

Unterstützt das moderne Syntax (ES2020+)?

Ja. Setze die ECMAScript-Zielversion auf ES2020 oder Next und Terser behält optionales Chaining, Nullish Coalescing, Top-Level-Await und logische Zuweisungsoperatoren. Setze sie auf ES5 und Terser kompiliert herunter, wo es kann — aber es ist kein vollständiger Transpiler; verwende Babel für Syntax, die ES5 überhaupt nicht darstellen kann.

Browser-seitige JavaScript-Minimierung mit Terser liefert produktionsreife Ausgabe ohne ein Build-Tool hinzuzufügen. Füge ein Skript ein, wähle die ECMAScript-Zielversion, kopiere oder lade das Ergebnis herunter. Nichts wird hochgeladen, kein Konto, keine Build-Pipeline. Der Minifizierer selbst lädt erst, wenn du ihn anforderst — das Öffnen dieser Seite kostet dir wenige Kilobyte, nicht ein Megabyte.