JavaScript Online minifizieren
JavaScript-Bundle-Größe optimieren. Sofort minifizieren oder verschönern.
Warum es nutzen
Leichteres JavaScript, schnellere Apps
40-60% Reduzierung
Entfernt Leerzeichen und Kommentare und kürzt Variablen, ohne die Funktionalität zu verändern.
Privat
JS wird in deinem Browser verarbeitet. Wird niemals auf einen Server hochgeladen.
Bidirektional
Minifiziere für die Produktion oder verschönere minifiziertes JS zum Lesen und Debuggen.
Sofort
Ergebnisse in Millisekunden. Keine Server-Verarbeitung.
So funktioniert es
Drei Schritte, kein Aufwand
JavaScript einfügen oder hochladen
JS-Code direkt einfügen oder eine .js-Datei hineinziehen. Keine Größenbeschränkung.
Minifizieren oder verschönern wählen
Minifizieren für die Produktion (kürzt Variablen, entfernt Leerzeichen) oder minifiziertes JS verschönern, um es zu lesen.
Ergebnis kopieren oder herunterladen
Das optimierte JavaScript erscheint sofort. In die Zwischenablage kopieren oder als Datei herunterladen.
FAQ
Noch Fragen?
JavaScript-Minifizierung entfernt Leerzeichen, Kommentare und Zeilenumbrüche, kürzt lokale Variablen- und Funktionsnamen (Umbennung/Mangling) und eliminiert in manchen Fällen toten Code. Das Ergebnis ist funktional identisch, aber deutlich kleiner, was Ladezeit und Parse-Zeit der JS-Engine reduziert.
UglifyJS (2010) war der erste weit verbreitete JavaScript-Minifizierer und führte Komprimierung und Mangling (Variablenumbenennung) ein. Terser ist der moderne Nachfolger von UglifyJS, kompatibel mit ES2015+ und ES-Modulen. Minifizierung ist der allgemeine Begriff für Größenreduzierung. Terser ist heute der De-facto-Standard und wird intern von webpack, Vite, Rollup und esbuild verwendet.
Typischerweise 40-60% der ursprünglichen Größe bei gut kommentiertem und formatiertem JavaScript. Eine 200-KB-Datei kann allein durch Minifizierung auf 80-120 KB reduziert werden. Kombiniert mit gzip/Brotli-Komprimierung können Gesamteinsparungen 80% übersteigen. Variablenumbenennung liefert zusätzliche 10-20% Reduzierung über das bloße Entfernen von Leerzeichen hinaus.
Minifiziertes JavaScript kann verschönert werden, um eine lesbare Struktur zurückzugewinnen, aber umbenannte Variablen- und Funktionsnamen können nicht wiederhergestellt werden: calculateMonthlyPayment kann zu a oder b geworden sein. Ohne die ursprünglichen Source Maps ist der verschönerte Code funktional, aber schwer verständlich. Source Maps bilden minifizierten Code auf den Originalcode ab und sind für das Debugging in der Produktion unerlässlich.
Source Maps sind .js.map-Dateien, die eine Entsprechung zwischen minifiziertem/transpiliertem Code und dem ursprünglichen Quellcode herstellen. Wenn in der Produktion ein Fehler auftritt, nutzt der Browser die Source Map, um den Stack Trace mit Originalnamen und Zeilennummern statt der minifizierten Version anzuzeigen. Sie werden automatisch von webpack (devtool: source-map), Vite (build.sourcemap: true) oder Terser (--source-map) erzeugt.
Geschichte der JavaScript-Minifizierung und Bundle-Optimierung
JavaScript-Minifizierung entstand mit JSMin, das Douglas Crockford im Jahr 2001 entwickelte. Crockford bemerkte, dass an den Client gesendetes JavaScript enorme Mengen an Leerzeichen und Kommentaren enthielt, die unnötige Bandbreite verbrauchten. JSMin war der erste systematische Komprimierer: Er entfernte Kommentare und Leerzeichen und bewahrte dabei die Sprachsemantik. Kurz darauf führte YUI Compressor (Yahoo, 2007) einfache Variablenumbenennung ein und legte den Grundstein für moderne Minifizierung.
Tree-Shaking ist eine verwandte, aber eigenständige Technik: Während Minifizierung vorhandenen Code reduziert, eliminiert Tree-Shaking nie ausgeführten Code (toten Code) durch Analyse des ES-Module-Import-Graphen. Rollup popularisierte Tree-Shaking 2015; webpack übernahm es in Version 2. Code-Splitting ergänzt diese Techniken, indem das Bundle in bei Bedarf geladene Chunks aufgeteilt wird (dynamic import()), was das initiale JavaScript reduziert, das der Browser parsen und ausführen muss.
Googles Lighthouse-Tool enthält eine JavaScript-Coverage-Analyse (Coverage-Tab in Chrome DevTools), die anzeigt, wie viel Prozent des heruntergeladenen JS beim initialen Laden tatsächlich ausgeführt wird. HTTP Archive-Studien zeigen, dass eine durchschnittliche Webseite über 400 KB komprimiertes JavaScript lädt (1+ MB unkomprimiert), was es zur Ressource macht, die die Time to Interactive (TTI) am stärksten beeinträchtigt. Die Einführung von nativem ESM in modernen Browsern und das importmaps-Modulmuster stellt die nächste Entwicklungsstufe effizienter JavaScript-Auslieferung dar.