JavaScript minifizieren

Dieselbe Art von Minifier, die Build-Tools verwenden – direkt in dieser Seite. Moderne Syntax und Module werden verstanden, und Ihr Quelltext wird nie gespeichert.

Nie gespeichert
Keine Warteschlange, kein Warten
Ohne Anmeldung, ohne Wasserzeichen

Lokale Variablen umbenennen Kleiner, aber unlesbarAls Modul parsen Nötig für import und exportconsole-Aufrufe entfernen Lizenzkommentare behalten Sie zu entfernen, kann gegen eine Lizenz verstoßen

Ihr JavaScript

Minifiziert

Das minifizierte JavaScript erscheint hier.

So funktioniert’s

JavaScript einfügen

Oder die Datei hier ablegen. Module, Klassen und moderne Syntax werden verstanden.

Optionen wählen

Lokale Variablen umbenennen, console-Aufrufe entfernen, Lizenzkommentare behalten – jede Option lässt sich einzeln schalten.

Kopieren oder herunterladen

Mit der Größe vorher und nachher.

Umbenennen, entfernen – und was nie angefasst werden darf

Es passieren drei Dinge, geordnet danach, wie viel sie sparen und wie viel sie Sie kosten. Leerraum und Kommentare fallen weg, das kostet nichts. Toter Code fällt weg – ein Zweig, der nie ausgeführt werden kann, eine Variable, die zugewiesen und nie gelesen wird. Und lokale Namen werden gekürzt, sodass aus einem sorgfältig benannten calculateMonthlyTotal ein einzelner Buchstabe wird. Dort liegt der größte Teil der Ersparnis, und genau das macht die Ausgabe unlesbar – gut zum Ausliefern, nutzlos zum Debuggen.

Nicht umbenannt werden darf alles, worauf die Außenwelt über den Namen zugreift, und wer das falsch macht, bricht Code. Exportierte Funktionen, Objekteigenschaften, auf die per String zugegriffen wird, alles, was über window erreicht wird, und Namen in eval müssen unverändert bleiben, weil anderswo etwas sie unter dem Namen nachschlägt, den Sie geschrieben haben. Eigenschaften bleiben standardmäßig ganz unangetastet: user.emailAddress umzubenennen würde in dem Moment brechen, in dem das Objekt als JSON serialisiert oder von separat minifiziertem Code gelesen wird.

Behalten Sie eine Source Map oder das Original. Sind die Namen erst weg, liest sich ein Stacktrace von einem echten Nutzer wie ein Fehler in Funktion t bei Zeichen 48.213 – und das sagt Ihnen gar nichts. Eine Source Map stellt im Debugger und in der Fehlerberichterstattung die ursprünglichen Namen und Zeilennummern wieder her, und sie zu erzeugen kostet nichts, weil sie als separate Datei ausgeliefert wird, die nur geladen wird, wenn jemand die Entwicklertools öffnet.

Lizenzkommentare bleiben standardmäßig erhalten – und das ist eine rechtliche Position, keine Vorliebe. Sehr viel Open-Source-Code steht unter einer freizügigen Lizenz, deren einzige Bedingung ist, dass der Urheberrechtshinweis mitgeliefert wird – MIT und BSD sagen das ausdrücklich. Wer diese Kommentare aus einem Bundle mit Code von Dritten entfernt, verstößt gegen genau die Lizenz, die ihm die Nutzung erlaubt. Es geht um ein paar hundert Bytes.

Wenn Sie etwas anderes brauchen

Das gehört in einen Build und nicht in einen Browser-Tab, und moderne Bundler erledigen es ganz selbstverständlich. esbuild --minify sowie Rollup oder Vite minifizieren beim Build, erzeugen automatisch Source Maps und – viel wichtiger – betreiben Tree Shaking: Sie werfen die Exporte Ihrer Abhängigkeiten heraus, die Sie nie importieren. In einer echten Anwendung spart das weit mehr, als das Minifizieren einer fertigen Datei je kann.

Messen Sie, bevor Sie optimieren. Ein Bundle-Analyzer zeigt meist, dass eine einzige große Abhängigkeit den Großteil der Datei ausmacht – eine Datumsbibliothek, ein Icon-Set, ein Diagrammpaket, das für ein einziges Diagramm komplett eingebunden wird. Sie zu ersetzen oder erst bei Bedarf zu laden schlägt jedes Minifizieren, und Code Splitting, damit eine Seite nur lädt, was sie braucht, schlägt beides.

Häufig gestellte Fragen

Wird mein Code irgendwo gespeichert?

Nein – und bei Quelltext ist genau das der Punkt. Es wird nichts gespeichert, und kein Server bekommt ihn je zu sehen. Proprietären Quelltext in einen Online-Minifier einzufügen, der ihn irgendwohin sendet, ist eine Offenlegung, egal was die Website über die Aufbewahrung sagt – und genau so etwas passiert schnell mal in der Eile, ohne nachzudenken.

Ist das derselbe Minifier wie in meinem Build-Tool?

Höchstwahrscheinlich ja. Es ist dieselbe Art von Minifier, die webpack, Rollup, Vite und die meisten anderen Bundler verwenden. Der Unterschied ist nur, dass er hier läuft, statt dass Sie ihn installieren.

Ändert sich dadurch, was mein Code tut?

Das sollte es nicht, und das wird geprüft statt angenommen: Unsere Tests minifizieren ein Modul, importieren sowohl das Original als auch die minifizierte Version, führen beide aus und vergleichen die Ergebnisse. Was sich SEHR WOHL ändert: lokale Variablennamen (sofern Sie das nicht ausschalten), konstante Ausdrücke, die sich vorab berechnen lassen, und toter Code. Alles, was zur Laufzeit vom Namen einer Funktion oder von Function.prototype.toString abhängt, kann durch das Umbenennen brechen – schalten Sie es aus, wenn Sie sich auf eines davon verlassen.

Was bedeutet „Als Modul parsen“?

Ob Ihr Code als ES-Modul oder als einfaches Skript geparst wird. Module können import und export verwenden und laufen immer im Strict Mode. Die Option ist standardmäßig eingeschaltet, weil der meiste moderne Code so aussieht; ist Ihre Datei ein Skript alten Stils, das „with“ verwendet oder sich auf nicht-striktes Verhalten verlässt, schalten Sie sie aus.

Soll ich console-Aufrufe entfernen?

Für die Produktion meistens ja – sie sind Rauschen und können interne Details an jeden verraten, der die Entwicklertools öffnet. Die Option ist standardmäßig ausgeschaltet, weil ein Tool nicht ungefragt stillschweigend Code löschen sollte.

Bleiben Lizenzkommentare erhalten?

Ja, standardmäßig. Kommentare, die mit /*! beginnen oder @license bzw. @preserve enthalten, bleiben erhalten, denn sie aus der MIT-lizenzierten Bibliothek eines anderen zu entfernen ist eine Lizenzverletzung. Gewöhnliche Kommentare werden entfernt.

Kann es eine Source Map erzeugen?

Nicht auf dieser Seite. Eine Source Map ist nur neben der Originaldatei unter einer bekannten URL nützlich, und das passt nicht zu einem Tool zum Einfügen und Kopieren – dafür ist Ihr Build-Tool der richtige Ort.

Gibt es eine Größenbeschränkung?

Keine feste. Ein paar tausend Zeilen sind in deutlich unter einer Sekunde minifiziert; eine sehr große gebündelte Datei dauert länger, weil alles geparst wird, bevor irgendetwas umbenannt wird. Wenn Sie ein komplettes Produktions-Bundle minifizieren, ist Ihr Build-Tool der bessere Ort dafür – diese Seite ist für eine einzelne Datei oder eine schnelle Prüfung gedacht.

Gut zu wissen: Das Umbenennen lokaler Variablen macht die Datei kleiner und die Ausgabe unlesbar – gut zum Ausliefern, nutzlos zum Debuggen. Behalten Sie eine Source Map oder das Original. Lizenzkommentare bleiben standardmäßig erhalten, weil ihr Entfernen gegen die Lizenz von Code verstoßen kann, den Sie verwenden dürfen.

Dieses Tool auf Ihrer Website einbinden

Kostenlos für jeden Blog, jede Kursseite und jeden Hilfeartikel. Fügen Sie ein einziges Snippet ein, und Ihre Besucher können das Tool direkt auf Ihrer Seite nutzen.