Zum Inhalt springen
🛠️
Whiz Tools

JavaScript-Minimierer - Kostenloser Online-JS-Code-Optimierer

Kostenloses JavaScript-Minimierer-Tool zur Reduzierung der Codegröße durch Entfernen von Leerzeichen und Kommentaren. Optimieren Sie JS-Dateien sofort ohne Installation.

JavaScript-Minimierer

Über dieses Tool

Dieser einfache JavaScript-Minimierer entfernt unnötige Leerzeichen und Kommentare, um die Größe Ihres Codes zu reduzieren. Er behält die Funktionalität bei und macht Ihren Code kompakter.

  • Entfernt unnötige Leerzeichen (Leerzeichen, Tabulatoren, Zeilenumbrüche)
  • Entfernt Kommentare (einzeilige und mehrzeilige)
  • Behält Zeichenkettenliterale und reguläre Ausdrücke bei
  • Erhält Codefunktionalität
Ladekalkulator...
📚

Dokumentation

Was ist ein JavaScript-Minifizierer?

Ein JavaScript-Minifizierer ist ein Werkzeug, das den JavaScript-Quellcode verkleinert, indem es Zeichen entfernt, die ein Browser zum Ausführen nicht benötigt, etwa zusätzliche Leerzeichen, Zeilenumbrüche und Kommentare. Nach der Minifizierung macht der Code weiterhin genau dasselbe. Nur seine Dateigröße ändert sich.

Kleinere JavaScript-Dateien werden schneller heruntergeladen und geladen. Daher ist die Minifizierung ein üblicher Schritt, bevor eine Website online geht.

So funktioniert die JavaScript-Minifizierung

Dieses Werkzeug liest den Code Zeichen für Zeichen und baut ihn neu auf. Dabei lässt es alles weg, was Leser benötigen, die JavaScript-Engine jedoch nicht. Entfernt werden:

  • Kommentare, sowohl // single-line-Kommentare als auch /* multi-line */-Kommentare, einschließlich Kommentaren im JSDoc-Stil.
  • Zusätzliche Leerzeichen, Tabulatoren und Leerzeilen, die nur zur besseren Lesbarkeit des Codes vorhanden sind.

Es fügt nichts anderes hinzu und entfernt nichts anderes. Ein Semikolon, eine Klammer oder ein anderes Zeichen, das bereits im Code vorhanden war, wird niemals gelöscht, und es werden niemals neue Satzzeichen eingefügt. Mehrere Dinge bleiben ebenfalls unverändert:

  • Text innerhalb von Zeichenketten ("like this", 'like this') und Template-Literalen (`like this`), selbst wenn dieser Text Leerzeichen enthält oder wie ein Kommentar aussieht.
  • Reguläre-Ausdrücke-Literale wie /[a-z]+/g zusammen mit all ihren Flags: d, g, i, m, s, u, v und y.
  • Jedes Semikolon, jedes Komma und jede Klammer, die der ursprüngliche Code bereits enthielt.

Manchmal kann ein Leerzeichen zwischen zwei Token nicht entfernt werden, ohne ihre Bedeutung zu ändern. return a kann nicht zu returna werden, weil dies als ein einziges Wort gelesen würde. Dasselbe gilt für Namen mit Buchstaben außerhalb des englischen Alphabets. Deshalb behält typeof π sein Leerzeichen. Wenn das Entfernen eines Leerzeichens zwei Token miteinander verschmelzen würde, lässt das Werkzeug stattdessen ein einzelnes Leerzeichen stehen.

Auch ein Zeilenumbruch kann von Bedeutung sein. JavaScript fügt manchmal am Ende einer Zeile automatisch ein Semikolon ein. Diese Regel wird als Automatic Semicolon Insertion bezeichnet. Könnte das Löschen eines Zeilenumbruchs diese Regel auslösen oder verhindern oder folgt der Zeilenumbruch auf eine schließende Klammer }, behält das Werkzeug dort einen einzelnen Zeilenumbruch bei. Deshalb wird minifizierter Code nicht immer auf eine einzige Zeile zusammengedrängt: Einige Zeilenumbrüche ändern die Bedeutung des Codes und müssen erhalten bleiben.

So verwenden Sie diesen JavaScript-Minifizierer

  1. JavaScript-Code in das Eingabefeld einfügen.
  2. „Minify“ auswählen.
  3. Lesen Sie das Ergebnis im Ausgabefeld zusammen mit der ursprünglichen Größe, der minifizierten Größe und der prozentualen Reduktion ab.
  4. „Copy“ auswählen, um den minifizierten Code zu kopieren.

Die Minifizierung läuft innerhalb des Browser-Tabs ab. Der Code wird daher zur Verarbeitung nirgendwohin hochgeladen. Das Werkzeug kopiert den eingefügten Code außerdem in die Seitenadresse, sodass sich ein Ergebnis einfach als Lesezeichen speichern oder teilen lässt. Jede Person, die diese Adresse sehen kann, kann daher auch den Code sehen.

Beispiel: Eine Funktion minifizieren

Vorher:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Nachher:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Alle drei Kommentare verschwinden, und die Einrückung wird entfernt. Das Semikolon nach a+b bleibt erhalten, weil das Werkzeug niemals ein bereits vorhandenes Semikolon löscht. Auch der Zeilenumbruch vor const bleibt erhalten, weil er auf eine schließende } folgt.

Beispiel: Eine Klasse minifizieren

Vorher:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Nachher:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Beachten Sie, dass vor jeder Methode und vor der schließenden } der Klasse ein Zeilenumbruch erhalten bleibt. Jeder dieser Zeilenumbrüche folgt im ursprünglichen Code auf eine schließende }. Deshalb bewahrt die Regel zum Schutz der Automatic Semicolon Insertion sie. Auch die Semikolons innerhalb jeder Methode bleiben erhalten.

Formel zur Größenreduktion

Das Werkzeug zeigt unter dem Ausgabefeld drei Zahlen an: die ursprüngliche Größe, die minifizierte Größe und die Reduktion. Alle Größen sind Zeichenanzahlen, keine Byteanzahlen. Die Reduktion ist ein auf die nächste ganze Zahl gerundeter Prozentsatz:

1reduction = round((1 - minified characters / original characters) x 100)
2

Das obige Funktionsbeispiel enthält vor der Minifizierung 213 Zeichen und danach 103. Somit gilt 1–103 / 213 = 0,5164, also 51,64 %. Das Werkzeug zeigt 52 % an. Das Klassenbeispiel wird von 515 Zeichen auf 304 verkürzt. Das entspricht 40,97 %, angezeigt als 41 %.

Grenzen dieses Minifizierers

Dieses Werkzeug entfernt nur Kommentare und Leerraum. Anders als Build-Werkzeuge wie Terser oder UglifyJS benennt es Variablen nicht um, löscht keinen ungenutzten Code und fasst keine Dateien zusammen. Solche Werkzeuge erzeugen in der Regel eine kleinere Ausgabe, benötigen für ihre Ausführung jedoch einen Build-Prozess. Dieses Werkzeug arbeitet ohne Einrichtung sofort im Browser und eignet sich daher eher für schnelle Prüfungen oder kleine Codeausschnitte als für eine vollständige Produktionspipeline.

Häufig gestellte Fragen

Was entfernt ein JavaScript-Minifizierer?

Er entfernt Kommentare und Leerraum, die zum Ausführen des Codes nicht benötigt werden. Semikolons, Klammern oder andere Zeichen, die bereits Teil des Codes waren, entfernt er nicht.

Ändert die Minifizierung von JavaScript die Ausführung?

Nein. Minifizierter Code sollte dieselben Ergebnisse liefern wie das Original. Nur die Formatierung ändert sich.

Warum enthält minifizierter Code manchmal weiterhin Zeilenumbrüche?

Ein Zeilenumbruch kann durch die Automatic-Semicolon-Insertion-Regel von JavaScript erforderlich sein oder auf eine schließende Klammer } folgen. Ihn zu entfernen könnte die Funktionsweise des Codes ändern. Deshalb behält das Werkzeug an diesen Stellen einen einzelnen Zeilenumbruch bei, anstatt ihn zu löschen.

Ist Minifizierung dasselbe wie Komprimierung?

Nein. Bei der Minifizierung werden Zeichen direkt aus dem Quellcode entfernt. Bei der Komprimierung, etwa mit gzip oder Brotli, wird die Datei für die Übertragung über ein Netzwerk anders codiert. Websites verwenden üblicherweise beides zusammen.

Wird mein Code an einen Server gesendet?

Der Minifizierer selbst läuft vollständig im Browser-Tab, und der Code wird zur Minifizierung nicht hochgeladen. Der eingefügte Code wird in der Seitenadresse gespeichert, damit ein Ergebnis geteilt oder als Lesezeichen gespeichert werden kann. Daher erscheint er in der Adressleiste und im Verlauf des Browsers.

Kann minifizierter Code wieder in das Original zurückverwandelt werden?

Leerraum kann durch einen Code-Formatter wiederhergestellt werden. Kommentare sowie die ursprünglichen Variablen- und Funktionsnamen sind jedoch verschwunden, sofern keine separate Source Map gespeichert wurde.

Referenzen

  1. MDN Web Docs. "Minification." MDN-Glossar, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," Abschnitt 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," Abschnitt 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," Abschnitt 22.2.6, "Properties of the RegExp Prototype Object" (die Flag-Menge d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object