JavaScript minimieren

So funktioniert es

Fügen Sie Ihren Code in das linke Feld ein; die minimierte Fassung erscheint nach einem Moment rechts. Das Werkzeug zerlegt den Code wirklich und versteht, was Sie geschrieben haben: Es entfernt Leerraum, Zeilenumbrüche und Kommentare, vereinfacht Konstrukte wie if (x) { return a; } else { return b; } zu return x ? a : b und streicht Code, der nie laufen kann, etwa alles nach einem return. Ist das Kürzen der Namen eingeschaltet, werden lokale Namen in einer Funktion wie summe, artikel oder versandkosten zu einzelnen Buchstaben wie n, t oder e. Globale Namen, die andere Skripte aufrufen könnten, etwa der äußerste Funktionsname warenkorbSumme, bleiben bewusst stehen, damit Ihre Seite weiter funktioniert. Wenn console.log-Aufrufe vor dem Veröffentlichen verschwinden sollen, stellen Sie die zweite Option auf Entfernen. Kommentare mit /*! bleiben immer erhalten. Enthält der Code einen Syntaxfehler, wird nichts minimiert; stattdessen erhalten Sie Zeile, Spalte und das unerwartete Zeichen. Die Ergebniszeile zeigt die Größe vorher und nachher in Byte und die Ersparnis in Prozent.

Dieses Werkzeug ist auch als javascript minimieren, javascript minimieren online, js minimieren, javascript komprimieren, js datei verkleinern, javascript minifier bekannt.

Was ist Minimieren (Minify)?

JavaScript zu minimieren heißt, es als kürzesten Code neu zu schreiben, der dasselbe leistet. Das geschieht in drei Schritten: überflüssige Zeichen löschen (Leerraum, Zeilenumbrüche, Kommentare), Ausdrücke vereinfachen (kurze Bedingungsformen, nie laufender Code fällt weg) und lokale Namen kürzen. Eine kleinere Datei wird schneller geladen und geparst; die Seite reagiert dadurch früher auf Tippen und Klicken.

Was ist Mangling?

Mangling ersetzt die Namen lokaler Variablen und Parameter innerhalb von Funktionen durch Ein-Buchstaben-Namen, aus artikel und versandkosten werden etwa n und t. Lokale Namen sind außerhalb ihrer Funktion unsichtbar, deshalb ist das sicher und bringt eine der größten Ersparnisse beim Minimieren. Globale Namen bleiben, weil andere Skripte und onclick-Attribute im HTML sie verwenden können.

Zwei Fallen beim Minimieren

Die erste sind globale Namen. Ruft ein Knopf auf Ihrer Seite onclick="warenkorbSumme()" auf, muss dieser Name das Minimieren überstehen. Dieses Werkzeug kürzt die äußersten Namen nie, nur die lokalen innerhalb von Funktionen; das Minimieren einer einzelnen Skriptdatei bricht also die Verweise aus Ihrem HTML nicht. Greift Ihr Code über eval oder eine Zeichenkette per Name auf eine lokale Variable zu, geht das Kürzen schief; schalten Sie es dann aus.

Die zweite ist die Fehlersuche. Wirft minimierter Code einen Fehler, zeigt der Browser etwa Zeile 1, Spalte 18342 an, und das sagt über Ihre Quelle nichts. Bewahren Sie deshalb immer die nicht minimierte Quelle auf und veröffentlichen Sie die minimierte Kopie. Das Werkzeug JavaScript formatieren macht minimierten Code bei Bedarf wieder lesbar, gekürzte Namen kommen aber nicht zurück.

Welche Einstellung wofür

Skript Ihrer eigenen Website: Namen kürzen und console-Aufrufe entfernen, das ergibt das kleinste Ergebnis. Skript, das Sie weitergeben oder später debuggen: Namen behalten; die Ersparnis fällt etwas kleiner aus, Fehlermeldungen bleiben aber aussagekräftig.

Dieses Werkzeug minimiert jeweils eine Datei. Es bündelt keine Dateien und löst keine Modul-Importe auf. Projekte mit webpack oder Vite minimieren bereits beim Build; diese Seite ist für einzelne Skripte, Code-Schnipsel für ein CMS oder ein WordPress-Plugin und schnelle Versuche gedacht.

Häufige Fragen

Wie minimiere ich eine JavaScript-Datei?

Fügen Sie den Code links auf dieser Seite ein. Rechts erscheint er ohne Leerraum und Kommentare und mit kürzeren lokalen Namen. Kopieren Sie ihn oder laden Sie ihn als .min.js-Datei herunter; die Ergebniszeile zeigt die Ersparnis in Byte.

Kann Minimieren meinen Code kaputt machen?

Bei einem einzelnen Skript in der Regel nicht: Das Werkzeug zerlegt den Code, wendet nur bedeutungserhaltende Änderungen an und kürzt keine globalen Namen, die andere Skripte aufrufen könnten. Greift der Code über eval oder eine Zeichenkette per Name auf eine lokale Variable zu, bricht das Kürzen ihn; stellen Sie die Namensoption dann auf Nein. Testen Sie die minimierte Datei vor dem Veröffentlichen einmal auf Ihrer Seite.

Was bedeutet „Der Code ließ sich nicht lesen“?

Im Code steckt ein Syntaxfehler: eine nie geschlossene Klammer oder ein offenes Anführungszeichen oder ein fehlendes Komma. Die Meldung nennt Zeile, Spalte und das dort unerwartete Zeichen. Nach der Korrektur fügen Sie den Code erneut ein, und das Minimieren läuft von selbst.

Wird mein Code irgendwohin geschickt?

Nein. Der Minimierer läuft in Ihrem Browser; Ihr Code verlässt diese Seite nicht und wird auf keinen Server geladen.