Übersicht / Entwickler & Code / Code Minifier
Entwickler & Code 100% In-Browser & Offline

Code Minifier

Minifiziere JavaScript mit Terser und CSS mit csso im Browser, mit Anzeige der Ersparnis in Bytes und Gzip.

Text einfügen oder tippen; das Ergebnis erscheint direkt, Fehler werden unter der Eingabe angezeigt.

Deine Dateien und Eingaben verlassen nie deinen Browser – es wird nichts hochgeladen.

Optionen

Namen auf oberster Ebene bleiben erhalten, solange du ihre Verkürzung nicht einschaltest. Diese Option kann Skripte brechen, die sich dateiübergreifend aufrufen oder globale Variablen aus dem HTML nutzen. Lizenzkommentare beginnen mit /*! oder enthalten @license oder @preserve. Das Ziel legt fest, welche neueste Syntax Terser schreiben darf. Das Entfernen von console-Aufrufen und debugger-Anweisungen setzt „Code komprimieren" voraus.

Grenzen: 2.000.000 Zeichen. Größen sind UTF-8-Bytes. Die Gzip-Zeile erscheint nur, wenn dein Browser CompressionStream hat. HTML wird nicht minifiziert. Minifizieren verändert den Code, teste das Ergebnis also vor dem Einsatz. Dein Code wird auf dieser Seite verarbeitet und nirgendwohin gesendet.

JavaScript und CSS minifizieren ohne Build-Schritt

Eine kleine Landingpage, ein Skript aus dem CMS, ein Stylesheet vom Kunden: Für solche Dateien lohnt sich keine Webpack-Konfiguration. Hier fügst du den Code ein und bekommst die minifizierte Fassung. JavaScript läuft durch Terser, CSS durch csso.

Vorgehen

  1. Wähle oben JavaScript oder CSS.
  2. Ersetze den Beispielcode durch deinen eigenen. Das Ergebnis erscheint rund 300 Millisekunden nach der letzten Eingabe.
  3. Stelle die Optionen ein, zum Beispiel Variablennamen verkürzen oder console.*-Aufrufe entfernen.
  4. Kopiere das Ergebnis mit Kopieren oder lade es mit Herunterladen als script.min.js beziehungsweise styles.min.css.

Die Optionen für JavaScript

Terser kann den Code komprimieren (kürzere Ausdrücke, entfernter toter Code) und Namen verkürzen. Lokale Variablen und Parameter werden immer verkürzt, wenn du das willst. Namen auf oberster Ebene bleiben dagegen standardmäßig unberührt, denn ein anderes Skript oder ein onclick im HTML kann sie beim Namen rufen. Schalte die Verkürzung nur ein, wenn die Datei in sich geschlossen ist.

Mit Klassen- und Funktionsnamen behalten bleiben Namen erhalten, die du über .name ausliest oder in Fehlermeldungen brauchst. Das Ziel ES2015, ES2017, ES2020 oder ES2022 begrenzt die Syntax, die Terser schreiben darf. Kommentare lassen sich ganz entfernen, nur als Lizenzkommentar behalten (/*!, @license, @preserve) oder komplett erhalten.

Was csso am Stylesheet ändert

csso schreibt margin: 0px 0px 0px 0px zu margin:0 um, kürzt Farbwerte und entfernt Kommentare. Mit Regeln umstrukturieren fasst es außerdem Regeln mit gleichen Deklarationen zusammen. Hängt dein Layout an der Reihenfolge der Regeln, schalte das ab. Eigene Eigenschaften wie --brand und @media-Blöcke bleiben erhalten.

Grenzen und Datenschutz

Die Eingabe darf höchstens 2.000.000 Zeichen lang sein. Größen werden in UTF-8-Bytes angegeben, nicht in Zeichen. Gzip-Größen zeigt das Tool nur, wenn der Browser CompressionStream kennt. Bei einem JavaScript-Syntaxfehler siehst du Zeile und Spalte. csso meldet dagegen keine CSS-Fehler: Ein kaputter Teil kann ohne Hinweis fehlen. HTML minifiziert das Tool nicht.

Minifizieren verändert Code. Für ungewöhnlichen Code gibt es keine Garantie, dass er sich gleich verhält, teste die Datei also selbst. Terser und csso laufen in deinem Browser. Beim ersten Gebrauch lädt die Seite die Bibliotheksdatei von ihrem eigenen Server, im Netzwerk-Tab kannst du das sehen. Danach wird beim Klick nichts gesendet. Dein Code wird weder hochgeladen noch ausgeführt.

Häufig gestellte Fragen (FAQ)

Nur wenn nichts außerhalb der Datei diese Namen nutzt. Inline-Event-Handler und fremde Skripte, die deine Funktionen beim Namen aufrufen, würden brechen. Darum ist die Option standardmäßig aus.