JavaScript Minifier

Füge JavaScript ein und verkleinere es mit Terser: Toter Code wird entfernt, Namen werden gekürzt und Leerraum verschwindet. Syntaxfehler zeigen auf die genaue Zeile und Spalte.

Läuft im BrowserOhne AnmeldungKein Upload

Minifizierte Ausgabe

Anleitung: JavaScript Minifier

  1. Füge dein JavaScript ein oder öffne eine .js-Datei.
  2. Wähle die Optionen: Namen kürzen verkürzt lokale Variablen, Komprimieren schreibt Code in ein kleineres Äquivalent um, ES-Modul erlaubt import/export auf oberster Ebene.
  3. Wähle das ECMAScript-Ziel, das die Browser deiner Nutzer unterstützen. ES2020 ist für alle Evergreen-Browser sicher.
  4. Prüfe Größe, Ersparnis und Gzip-Schätzung unter der Ausgabe.
  5. Kopiere den minifizierten Code oder lade ihn als output.min.js herunter.

Was macht ein JavaScript-Minifier?

Minifizierung macht JavaScript kleiner, ohne zu ändern, was es tut. Dieses Tool verwendet Terser, den Minifier hinter webpack, Vite und Rollup, und wendet drei Arten von Änderungen an:

  • Entfernen von Leerraum und Kommentaren: Einrückungen, Zeilenumbrüche und Kommentare braucht die JavaScript-Engine nicht.
  • Mangling: Namen lokaler Variablen und Funktionsparameter wie subtotal werden zu einzelnen Buchstaben. Globale Namen und Objekteigenschaften bleiben unangetastet, damit deine öffentliche API weiter funktioniert.
  • Komprimierung: Konstante Ausdrücke werden ausgerechnet, unerreichbarer Code entfällt, if-Anweisungen werden zu ternären Ausdrücken und kurze Funktionen werden inline eingesetzt.

Minify vs. gzip: Brauchst du beides?

Ja. Gzip und Brotli komprimieren wiederkehrende Bytemuster bei der Übertragung, während die Minifizierung Bytes entfernt, die der Browser sonst herunterladen, parsen und kompilieren müsste. Ein typisches Script schrumpft durch Minifizierung um 40–60 % und durch gzip dann noch einmal um 60–70 %. Die hier angezeigte Gzip-Größe ist eine gute Schätzung dessen, was dein Server tatsächlich sendet.

Lizenzkommentare behalten

Viele Open-Source-Lizenzen (MIT, BSD, Apache) verlangen, dass der Copyright-Hinweis beim Code bleibt. Konventionsgemäß bleiben Kommentare, die mit /*! beginnen oder @license bzw. @preserve enthalten, erhalten, wenn Lizenzkommentare behalten aktiviert ist.

Wann du nicht von Hand minifizieren solltest

Wenn dein Projekt bereits einen Bundler nutzt, lass ihn Production-Builds minifizieren und Source Maps zum Debuggen erzeugen. Ein Online-Minifier ist ideal für einmalige Scripts, Snippets für ein CMS oder einen Tag Manager, Bookmarklets und um zu prüfen, wie klein ein Stück Code werden kann.

Häufig gestellte Fragen

Wird mein Code auf einen Server hochgeladen?
Nein. Terser läuft in deinem Browser-Tab, proprietärer Code verlässt also nie deinen Rechner.
Kann Minifizierung meinen Code kaputtmachen?
Terser wendet nur Transformationen an, die das Verhalten von gültigem JavaScript identisch lassen. Code, der sich auf Function.prototype.toString() oder über eval auf lokale Variablennamen verlässt, kann betroffen sein; deaktiviere in diesem Fall Namen kürzen.
Wird moderne Syntax wie async/await, Klassen und Optional Chaining unterstützt?
Ja. Terser parst ES2022+-Syntax. Die Zieleinstellung legt nur fest, welche Syntax die Ausgabe verwenden darf; neuere Features werden nicht in ältere transpiliert.
Was ist der Unterschied zwischen minify und uglify?
Beides bedeutet dasselbe. UglifyJS war das klassische Tool; Terser ist sein gepflegter Fork mit voller ES2015+-Unterstützung.

Ähnliche Tools