JS-Minifizierer

Der JS-Minifizierer ist ein kostenloses Tool, das überflüssige Zeichen aus JavaScript entfernt und die Zeichenanzahl vor und nach der Minifizierung ausgibt.

Welches Problem löst die JavaScript-Minifizierung?

Durch die Minifizierung von JavaScript muss der Browser weniger Quelltext herunterladen. Dabei werden üblicherweise Formatierungen wie Einrückungen, Zeilenumbrüche und Leerzeichen entfernt, sofern sie für die JavaScript-Syntax nicht erforderlich sind.

Ein kleineres Skript kann die übertragene Datenmenge und den Parsing-Aufwand verringern, insbesondere wenn eine Website mehrere große Bundles ausliefert. HTTP-Komprimierung wie Brotli oder gzip bleibt dennoch wichtig, da Minifizierung und Übertragungskomprimierung unterschiedliche Aspekte abdecken. Die Minifizierung entfernt Zeichen aus dem Quelltext, während die Komprimierung wiederkehrende Daten für die Übertragung kompakter codiert.

Normalerweise erfolgt dieser Schritt während eines Builds vor der Bereitstellung. Er ist auch hilfreich, um ein nicht minifiziertes Skript eines Drittanbieters zu prüfen, Bundle-Größen zu vergleichen oder eine eigenständige Datei für eine Website ohne Build-Pipeline vorzubereiten.

Eine erfolgreiche Minifizierung beweist nicht, dass das JavaScript korrekt funktioniert. Ein Skript kann erfolgreich minifiziert werden und dennoch fehlerhafte API-Aufrufe, nicht zugängliche Variablen oder Code enthalten, der erst zur Laufzeit fehlschlägt.

Wie verwende ich den JS-Minifizierer?

Füge den JavaScript-Code in das Feld JS ein und starte das Tool. Kopiere anschließend den unter Minifiziertes JS ausgegebenen Wert. Bewahre die ursprüngliche Quelldatei in der Versionsverwaltung auf und stelle die kompakte Kopie bereit, statt den lesbaren Quelltext zu ersetzen.

1. Prüfe den Quellcode zuerst mit einer Syntaxprüfung, einem Linter und automatisierten Tests.
2. Füge das vollständige Skript in JS ein, einschließlich aller Modulimporte oder Wrapper-Funktionen, die zur Datei gehören.
3. Vergleiche JS-Zeichen und Minifizierte JS-Zeichen, um die Änderung der Zeichenanzahl zu sehen.
4. Teste, ob das minifizierte JavaScript im selben Browser und in derselben Bereitstellungsumgebung wie die Produktionsdatei korrekt ausgeführt wird.
5. Verwende einen leicht erkennbaren Dateinamen wie app.min.js, wenn du die minifizierte und die lesbare Version gemeinsam speicherst.

Die Verarbeitung erfolgt auf dem Server. Deine Eingabe wird über HTTPS an den Server übertragen und nicht gespeichert. Der Server muss den JavaScript-Code dennoch empfangen, um ihn zu verarbeiten. Reiche daher keinen Quelltext ein, dessen Übermittlung an einen externen Dienst in deiner Organisation untersagt ist.

Was enthält das minifizierte Ergebnis?

Das Ergebnis enthält den kompakten JavaScript-Code und zwei Zeichenangaben. JS-Zeichen bezeichnet die Länge der Eingabe, während Minifizierte JS-Zeichen die Länge des unter Minifiziertes JS ausgegebenen Codes angibt.

Die Werte werden mit der PHP-Funktion mb_strlen ermittelt. Sie misst die Länge von Multibyte-Zeichenketten, statt lediglich die Byte-Anzahl auszugeben. Die Zeichenanzahl entspricht daher nicht der endgültigen Größe bei der Netzwerkübertragung. UTF-8-Zeichen können mehr als ein Byte belegen, und gzip oder Brotli kann die übertragene Datei zusätzlich verkleinern.

Dieses Tool gibt kein separates Feld für Validierungen oder Diagnosen aus. Erwarte nicht, dass es jede fehlende Klammer, jeden fehlerhaften regulären Ausdruck oder jede nicht unterstützte Sprachfunktion erkennt. Insbesondere sind JSON-bezogene Fehler wie Eigenschaftsnamen ohne Anführungszeichen oder nachgestellte Kommas keine zuverlässigen JavaScript-Prüfungen, da sich die Syntax von JavaScript-Objektliteralen und JSON unterscheidet. Verwende für JSON-Daten den JSON-Validator & -Verschönerer.

Kleine Beispiele und problematische Eingaben

Eine einfache Änderung der Abstände kann so aussehen.

Eingabe

function add(a, b) { return a + b; }

Kompakte Form

function add(a,b){return a+b;}

Auch die Formatierung eines Objekts lässt sich entfernen, ohne seine Eigenschaftswerte zu verändern.

Eingabe

const settings = { theme: "dark", retries: 2 };

Kompakte Form

const settings={theme:"dark",retries:2};

Die genaue Formatierung kann je nach Minifizierer variieren, insbesondere bei optionalen Semikolons. JavaScript lässt sich nicht sicher komprimieren, indem einfach jedes Leerzeichen oder jeder Zeilenumbruch gelöscht wird. Eine sichere Minifizierung muss den lexikalischen und syntaktischen Kontext berücksichtigen, um reine Formatierung von Zeichen zu unterscheiden, die das Programm beeinflussen.

• Leerzeichen in Zeichenketten sind Daten. Das Leerzeichen in "Newcastle upon Tyne" muss erhalten bleiben.
• Satzzeichen können Teil der Syntax sein. Wird das Leerzeichen aus a + +b entfernt, kann eine andere Token-Folge entstehen.
• Zeilenumbrüche beeinflussen mitunter das automatische Einfügen von Semikolons, etwa bei Code nach return, break oder continue. Direkt nach throw ist kein Zeilenumbruch zulässig, da der zugehörige Ausdruck in derselben Zeile beginnen muss.
• Akzentzeichen und nicht lateinische Zeichen können in Zeichenketten und, sofern die JavaScript-Regeln für Bezeichner es erlauben, auch in Bezeichnern vorkommen. Ihre Größe in Byte kann von ihrer Zeichenanzahl abweichen.
• Zahlen sind Quelltext-Token und keine Anweisungen zur Zeichenzählung. Ein Minifizierer muss ihre numerische Bedeutung beibehalten, auch wenn er eine kürzere gleichwertige Schreibweise verwendet.

Wann lohnt es sich nicht, JavaScript zu minifizieren?

Eine erneute Minifizierung lohnt sich normalerweise nicht, wenn eine Datei bereits minifiziert ist. Ein zweiter Durchlauf spart möglicherweise kaum oder gar nichts, erschwert aber die Rückverfolgung der Build-Ausgabe und kann bestehende Source Maps beeinträchtigen.

Ebenso wenig spricht dafür, JavaScript, das nur von einer Maschine gelesen wird, erst zu formatieren und anschließend wieder zu minifizieren. Bewahre für die Wartung einen gut lesbaren Quelltext auf und erzeuge daraus die Dateien für die Bereitstellung. Für eine etablierte Anwendung eignet sich in der Regel ein Build-Tool wie esbuild, Rollup oder webpack besser, da es das Bündeln von Modulen und das Erzeugen von Source Maps automatisieren kann. Die Minifizierung kann bereits integriert sein oder per Konfiguration beziehungsweise Plugin ergänzt werden. Terser ist dagegen ein speziell dafür entwickelter Minifizierer.

Betrachte Minifizierung nicht als Verschleierung oder Zugriffskontrolle. Namen von Funktionen und Variablen können sichtbar bleiben, Zeichenketten lassen sich weiterhin lesen und die Entwicklertools des Browsers können kompakten Code neu formatieren. Geheimnisse, private Schlüssel und privilegierte Zugangsdaten dürfen niemals in clientseitigem JavaScript eingebettet werden.

Wenn du alle statischen Ressourcen einer Seite vorbereitest, kannst du mit dem CSS-Minifizierer und dem HTML-Minifizierer die entsprechenden Formate bearbeiten. Verwende für jedes Format das passende Tool, da sich die Regeln für Parsing und Leerzeichen unterscheiden.

Häufig gestellte Fragen

Erstellt das Tool eine Source Map?

Nein, es wird kein Source-Map-Feld ausgegeben. Wenn Stacktraces aus der Produktionsumgebung auf die Originaldateien verweisen sollen, erzeuge das minifizierte Skript und die zugehörige .map-Datei im selben Build-Prozess. Eine Source Map aus einem anderen Build kann irreführende Zeilen- und Spaltenangaben liefern.

Verhindert die Minifizierung, dass jemand mein JavaScript kopiert?

Nein. Browser müssen ausführbaren clientseitigen Code empfangen, daher können Besucher ihn herunterladen und untersuchen. Die Minifizierung macht den Quelltext weniger lesbar, bietet aber weder Vertraulichkeit noch eine Durchsetzung von Lizenzbedingungen oder einen wirksamen Schutz eingebetteter Geheimnisse.

Kann ich Code mit API-Schlüsseln einfügen?

Du solltest keine geheimen API-Schlüssel, Tokens oder privaten Zugangsdaten einfügen. Die Eingabe wird über HTTPS übertragen und nicht gespeichert, die Verarbeitung findet jedoch auf dem Server statt. Öffentliche Browser-Schlüssel, die absichtlich an jeden Besucher verteilt werden, benötigen weiterhin Einschränkungen nach Domain, Origin, Kontingent oder Berechtigung, sofern der jeweilige Dienst diese unterstützt.

Lädt die Seite bei einer geringeren Zeichenanzahl immer schneller?

Nein. Die Auswirkungen hängen von der ursprünglichen Dateigröße, dem Caching, den Verbindungsbedingungen, der Serverkomprimierung und der Menge an JavaScript ab, die der Browser parsen und ausführen muss. Prüfe neben der Zeichenanzahl auch die komprimierte Übertragungsgröße und das Laufzeitverhalten.

Sollte ich nach der Minifizierung die Dateiendung .js beibehalten?

Ja. Minifiziertes JavaScript behält normalerweise die Dateiendung .js. Wenn beide Versionen vorhanden sind, wird üblicherweise .min.js als Namenskonvention verwendet. Prüfe vor der Bereitstellung, ob der Server einen geeigneten JavaScript-Inhaltstyp sendet und ob das HTML beziehungsweise der Modulimport auf die vorgesehene Datei verweist.