JavaScript-Formatierer und -Minifier

So formatieren oder minifizieren Sie JavaScript

1. Fügen Sie Ihren Code ein oder klicken Sie auf „Datei öffnen“, um eine .js-, .mjs- oder .jsx-Datei zu laden (bis 10 MB).
2. Wählen Sie die „Einrückung“ und aktivieren Sie „Geschweifte Klammern in eigener Zeile“, wenn Sie den Allman-Stil bevorzugen.
3. Klicken Sie auf „Formatieren (verschönern)“, um den Code lesbar zu machen.
4. Zum Verkleinern stellen Sie die „Minify-Optionen“ ein und klicken auf „Minifizieren“. Wenn Sie nur nach Fehlern suchen möchten, klicken Sie auf „Syntax prüfen“.
5. Kopieren oder laden Sie das Ergebnis herunter. Die Statuszeile zeigt die Größe vorher und nachher sowie die prozentuale Ersparnis.

Der Code wird nur gelesen und umgewandelt, aber nie ausgeführt: Nichts, was Sie einfügen, läuft auf dieser Seite.

Verschönern mit js-beautify

„Formatieren (verschönern)“ verwendet js-beautify. Das Tool setzt eine Anweisung pro Zeile, rückt Blöcke ein, fügt Leerzeichen um Operatoren und nach Schlüsselwörtern ein und behält höchstens eine Leerzeile dort, wo Sie welche hatten. Moderne Syntax wie Klassen, Pfeilfunktionen, Template-Literale und async/await sowie JSX werden verstanden. So lesen Sie am schnellsten eine minifizierte Bibliothek oder einen einzeiligen Schnipsel, den Sie von einer Webseite kopiert haben.

Beim Verschönern ändern sich nur Leerzeichen und Zeilenumbrüche. Ob der Code gültig ist, wird dabei nicht geprüft: Eine fehlende Klammer führt einfach zu merkwürdiger Einrückung. Dafür gibt es „Syntax prüfen“.

Minifizieren mit Terser

„Minifizieren“ verwendet Terser, den Minifier, den die meisten JavaScript-Build-Tools einsetzen. Weil Terser groß ist, wird er erst geladen, wenn Sie zum ersten Mal auf „Minifizieren“ oder „Syntax prüfen“ klicken. Die Optionen entsprechen direkt den Terser-Einstellungen:

• ES-Modul (import/export) liest den Code als Modul (module: true): Es gilt der Strict Mode, und Namen auf oberster Ebene sind privat, dürfen also umbenannt und bei Nichtverwendung entfernt werden. Lassen Sie die Option aus bei einem klassischen Skript, dessen globale Funktionen von anderen Skripten genutzt werden.
• Komprimieren (compress) schreibt den Code in kürzeren, gleichwertigen Code um: Konstanten werden ausgerechnet (2*60 wird zu 120), toter Code wird entfernt, var-Deklarationen werden zusammengefasst und Bedingungen verkürzt.
• Variablennamen kürzen (mangle) benennt lokale Variablen und Parameter in ein oder zwei Buchstaben um. Globale Namen und Objekteigenschaften werden nie umbenannt.
• Lizenzkommentare behalten bewahrt Kommentare, die mit /*! beginnen oder @license bzw. @preserve enthalten. Alle anderen Kommentare werden entfernt.

Die Minifizierung ändert nicht, was der Code tut. Code, der sich auf Funktionsnamen (fn.name) oder auf eval verlässt, kann sich nach dem Umbenennen aber anders verhalten. Deaktivieren Sie in diesem Fall „Variablennamen kürzen“.

Syntaxfehler mit Zeile und Spalte

Kann Terser den Code nicht parsen, zeigen „Minifizieren“ und „Syntax prüfen“ die Fehlermeldung mit Zeile und Spalte an, zum Beispiel „Zeile 12, Spalte 8 – Syntaxfehler: Unexpected token punc «)»“. Die Spalten werden ab 1 gezählt. Die Meldung selbst stammt von Terser und ist auf Englisch. Häufige Ursache ist eine fehlende Klammer weiter oben in der Datei – schauen Sie sich also auch die Zeilen kurz vor der gemeldeten Stelle an.