JavaScript formatieren oder minifizieren und sehen, wie viele Bytes wegfallen
Läuft in Ihrem Browser. Nichts, was Sie eingeben, wird irgendwohin gesendet.Beim Formatieren wird JavaScript eingerückt und Anweisungen stehen dort, wo man sie lesen kann; beim Minifizieren fallen Namen und Leerzeichen für die Produktion weg. Die entfernten Bytes werden angezeigt, so sehen Sie die Ersparnis bei einem 50-KB-Bundle vor der Auslieferung. Ihr Code wird im Browser verarbeitet und nie hochgeladen.
Diese Seite wurde maschinell aus dem englischen Original übersetzt. Die Übersetzung wurde noch von keinem Menschen geprüft; maßgeblich ist die englische Fassung. Englisches Original lesen
Fügen Sie JavaScript oder JSX in das Feld ein oder klicken Sie auf Beispiel laden; TypeScript wird nicht unterstützt.
Behalten Sie Formatieren, um es mit Prettier neu zu formatieren, oder wählen Sie Minifizieren, um es mit terser zu verkleinern.
Stellen Sie für Formatieren Einrückung, Umbruch bei, Semikolons und Einfache Anführungszeichen ein, oder die angezeigten Optionen für Minifizieren.
Klicken Sie auf Kopieren oder Herunterladen, um das Ergebnis zu übernehmen.
Dieser JavaScript-Formatierer erledigt die beiden Dinge, die man von einer Skriptdatei will. Formatieren lässt Prettier darüber laufen und gibt denselben Code in Ihrem Stil zurück: zwei Leerzeichen, vier Leerzeichen oder ein Tab, mit oder ohne Semikolons, einfache oder doppelte Anführungszeichen und eine Zeilenbreite Ihrer Wahl. Minifizieren lässt terser laufen und gibt die kleinste gleichwertige Datei zurück, mit der Größe vorher, der Größe nachher und der prozentualen Ersparnis.
Er passt zu den kleinen Aufgaben, die einen Tag unterbrechen. Ein aus einer Online-Antwort kopiertes Snippet folgt einem Stil, den Ihr Projekt nicht nutzt. Eine geerbte Datei hat drei Anweisungen pro Zeile. Sie wollen ungefähr sehen, wie groß eine Hilfsfunktion nach der Auslieferung wird, bevor Sie entscheiden, sie selbst zu schreiben. Und manchmal brauchen Sie das Gegenteil: ein minifiziertes Bundle, so weit aufgefaltet, dass sich erkennen lässt, was ein Fremdskript tut.
Minifizieren hat zwei Schalter. Lokale Variablen in einzelne Buchstaben umzubenennen bringt den Großteil der Ersparnis und ändert nichts, was sich von außen beobachten lässt. Funktionsnamen zu behalten kostet ein paar Bytes, lässt aber Stacktraces und alles, was den Namen einer Funktion liest, lesbar, was zählt, wenn Sie Fehler an einen Monitoring-Dienst senden.
Das Tool liest reines JavaScript und JSX. TypeScript wird nicht unterstützt: Wenn Sie es einfügen, wäre der Parserfehler nutzlos, deshalb prüft die Seite zuerst und sagt Ihnen, welches TypeScript-Konstrukt sie gefunden hat, etwa einen Typalias oder einen typisierten Parameter. Alles läuft in Ihrem Browser, unveröffentlichter Code und alles mit einem Schlüssel darin verlassen also nie Ihr Gerät.
Ja. Keine Anmeldung, keine Größenbegrenzung und keine Obergrenze dafür, wie viele Dateien Sie verarbeiten. Die Seite finanziert sich über einige Anzeigen außerhalb des Tools, und in Ihren Code wird nichts eingefügt.
Nein. Prettier und terser laufen beide in Ihrem Browser. Unveröffentlichter Code, interne Endpunkte oder ein API-Schlüssel in einem Konfigurationsobjekt verlassen nie Ihr Gerät, und nach dem Schließen des Tabs wird nichts gespeichert.
Nein. Es liest reines JavaScript und JSX. Wenn Sie TypeScript einfügen, nennt die Seite das gefundene Konstrukt, etwa einen Typalias oder einen typisierten Parameter, statt einen nichtssagenden Parserfehler zu zeigen. Entfernen Sie zuerst die Typen oder nutzen Sie einen Editor, der TypeScript versteht.
Lesbarer Quelltext mit Kommentaren schrumpft meist um 40 bis 60 Prozent, und deutlich mehr bei langen Variablennamen und Leerzeilen. Bereits minifizierter Code ändert sich kaum. Die genauen Bytezahlen werden angezeigt, damit Sie vergleichen können.
Mangling benennt lokale Variablen und Funktionsargumente in einzelne Buchstaben um. Außerhalb der Datei sieht niemand diese Namen, das Verhalten bleibt also gleich, und es ist meist die größte einzelne Ersparnis. Exportierte Namen und Objekteigenschaften bleiben unberührt.
Das Layout bekommen Sie zurück, die Namen nicht. Formatieren fügt Zeilenumbrüche, Einrückung und Abstände hinzu, damit der Code lesbar ist, aber ein Minifier verwirft die ursprünglichen Variablennamen und Kommentare, und kein Tool kann sie wiederherstellen.
Kommen Sie nicht weiter? Fragen Sie zu JavaScript-Formatierer und Minifier und jeder, der es weiß, kann antworten. Kein Konto nötig.