DT Dev Tools

JavaScript Minifier — JavaScript-Minifizierer

JavaScript mit Terser im Browser minifizieren: Code komprimieren, Namen kürzen, console-Aufrufe entfernen und Dateigrößen vorher und nachher vergleichen.

🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladen

Drop a .js file here or click to browse — or paste code below

Before: –After: –Saved: –
Advertisement

So funktioniert die JavaScript-Minifizierung

Minifizierung macht JavaScript kleiner, ohne sein Verhalten zu ändern. Dieses Tool verwendet Terser, einen ausgereiften Minifizierer, der deinen Code in einen abstrakten Syntaxbaum zerlegt, ihn umformt und ohne überflüssige Leerzeichen und Kommentare wieder ausgibt. Der Schritt compress wendet Dutzende Optimierungen an: Er entfernt unerreichbaren Code und ungenutzte Variablen, setzt Konstanten direkt ein, fasst aufeinanderfolgende Variablendeklarationen zusammen, wandelt if-Anweisungen nach Möglichkeit in kürzere bedingte Ausdrücke um und berechnet einfache konstante Ausdrücke bereits vorab. Anschließend benennt der Schritt mangle lokale Variablen, Parameter und Funktionsnamen in ein oder zwei Buchstaben um. Eigenschaftsnamen und globale Variablen bleiben unangetastet, sodass das öffentliche Verhalten deines Codes gleich bleibt.

Die Größenanzeigen zeigen die UTF-8-Bytegröße von Eingabe und Ausgabe sowie die prozentuale Ersparnis. Typischer handgeschriebener Code schrumpft um 40–70 %; bereits kompakter Code oder Code mit vielen langen Zeichenketten schrumpft weniger. Beachte, dass Server JavaScript meist zusätzlich mit gzip oder Brotli komprimieren. Die tatsächliche Ersparnis bei der Übertragung ist daher kleiner als der Rohwert, doch minifizierter Code wird trotzdem schneller geparst und verbraucht weniger Bandbreite.

Die richtigen Optionen wählen

Das ECMAScript target legt fest, welche Syntax Terser in der Ausgabe verwenden darf. Mit ES2020 kann es Pfeilfunktionen, Optional Chaining und andere moderne Formen erzeugen; mit ES5 vermeidet es neuere Syntax, transpiliert aber keinen modernen Code, den du selbst geschrieben hast – dafür brauchst du ein Tool wie Babel oder esbuild. Keep console.* erhält Log-Ausgaben, was für Staging-Builds praktisch ist. Aktiviere ES module für Dateien, die import/export verwenden; dann können auch Namen auf oberster Ebene gekürzt werden, weil der Modul-Scope privat ist.

Privat by Design

Der Minifizierer wird bei Bedarf geladen und läuft lokal, dein Quellcode wird also nie hochgeladen. Damit eignet er sich gut für schnelle einmalige Aufgaben, etwa um ein Inline-Skript, ein Bookmarklet oder ein Snippet für einen Tag-Manager eines Drittanbieters zu verkleinern. Meldet Terser einen Syntaxfehler, enthält die Meldung Zeile und Spalte, damit du die Eingabe korrigieren kannst. Für Produktions-Bundles solltest du die Minifizierung in deiner Build-Pipeline belassen, damit sie reproduzierbar ist, und Source Maps für das Debugging erzeugen.

So verwenden Sie

  1. Code einfügenFüge JavaScript in das Eingabefeld ein oder ziehe eine .js-Datei in den Ablagebereich.
  2. Optionen wählenSchalte Komprimierung, Namenskürzung, Entfernen von console-Aufrufen, Modulmodus und das ECMAScript-Ziel ein oder aus.
  3. MinifizierenKlicke auf Minify JavaScript, um die Ausgabe mit Größe vorher, nachher und der prozentualen Ersparnis zu sehen.
  4. Kopieren oder herunterladenKopiere den minifizierten Code oder lade ihn als .min.js-Datei herunter.

Häufig gestellte Fragen

Welcher Minifizierer wird verwendet?
Terser – der Standard-Minifizierer für JavaScript in webpack und ein optionaler Minifizierer in Vite und Rollup. Er läuft vollständig in deinem Browser.
Was ist der Unterschied zwischen compress und mangle?
Compress schreibt den Code in eine kürzere, gleichwertige Form um: Er entfernt toten Code, berechnet Konstanten vorab und vereinfacht Ausdrücke. Mangle benennt lokale Variablen und Funktionsparameter in kurze Namen um. Beides ist für normalen Code sicher und lässt sich unabhängig voneinander aktivieren.
Warum sind meine console.log-Aufrufe verschwunden?
Standardmäßig entfernt der Kompressor console.*-Aufrufe, wie es bei Produktions-Bundles üblich ist. Aktiviere Keep console.*, um sie zu behalten.
Wann sollte ich ES module aktivieren?
Aktiviere die Option, wenn deine Datei import- oder export-Anweisungen enthält. Im Modulmodus kann Terser außerdem Namen auf oberster Ebene kürzen – das ist bei Modulen sicher, kann aber klassische Skripte beschädigen, die globale Variablen bereitstellen.
Advertisement