Softonic

JavaScript-Minifier

Schritt 1 / 3
Nächste

Fügen Sie JavaScript ein und erhalten Sie eine minifizierte Version, die 40-70% kleiner ist, Leerzeichen entfernt, Variablen auf einzelne Buchstaben verkürzt, tote Zweige entfernt, Konstanten gefaltet und (wenn Sie es aktivieren) Kommentare gelöscht. Nützlich für schnelle Größenprüfungen, einmalige Einbettungen und Landing Pages, auf denen Sie kein vollständiges Build-Toolchain ausführen.

So minifizieren Sie JavaScript

  1. 1

    Fügen Sie den Quellcode ein

    Jedes gültige ES5+ JavaScript. Stellen Sie sicher, dass Ihr Ziel mit ES6 und darüber hinaus (Template-Literale, Klassen, Module) übereinstimmt.

  2. 2

    Wählen Sie die Aggressivität

    Sicher (Leerzeichen + Kommentare), Standard (+ Variablenumbenennung), aggressiv (+ Eigenschaften verunstalten, kann DOM-Zugriff brechen).

  3. 3

    Minifizieren

    Das Tool führt eine Terser-kompatible Transformation durch und gibt das Ergebnis mit Byte-Zählungen vor/nach der Minifizierung aus.

  4. 4

    Kopieren oder herunterladen

    Fügen Sie die Ausgabe in ein `<script>`-Tag ein oder speichern Sie sie als `.min.js`, um sie von Ihrem CDN bereitzustellen.

Wo die Bytes hingehen

Eine typische minifizierte Datei ist 40-70% kleiner als die Quelle. Das Verpacken in gzip (oder Brotli, das Cloudflare und die meisten CDNs verwenden) reduziert sie um weitere 60-75%. Zusammen kann eine 100 KB große Quelle als ~15-25 KB über das Netz geliefert werden.

Quelle Minifiziert +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Angewandte Techniken

Technik Was es tut
Leerzeichen entfernen Entfernen von Leerzeichen, Tabs, Zeilenumbrüchen
Kommentar entfernen Löschen von // und /* */ (es sei denn, !important)
Variablenverunstaltung Umbenennen von userName -> u (bereichssicher)
Eigenschaftenverunstaltung Umbenennen von obj.foo -> obj.a (UNSICHER)
Konstantenfaltung 1 + 2 + 3 -> 6
Eliminierung von totem Code Entfernen von Zweigen nach return
Inline-Control-Flow Inline von winzigen Funktionen, die einmal verwendet werden
Komprimierung von String-Literalen Zusammenführen wiederholter String-Konstanten

Sicherer vs. aggressiver Modus

  • Sicher behält Variablennamen bei, entfernt nur Leerzeichen. Gut für das Debuggen, wenn Sie lesbare Stack-Traces möchten.
  • Standard verunstaltet lokale Variablen, behält jedoch globale und Eigenschaftsnamen. Funktioniert mit den meisten Codes.
  • Aggressiv verunstaltet alles, einschließlich Eigenschaftsnamen. Es bricht oft Code, der Eigenschaften dynamisch zugreift (obj["prop"], Object.keys(obj)), es sei denn, Sie konfigurieren reservierte Namen.

Wann man minifizieren sollte: und wann nicht

  • Minifizieren Sie in der Produktion, bei jedem Asset, das der Browser herunterlädt.
  • Stellen Sie eine Quellkarte bereit, damit die DevTools des Browsers die ursprünglichen Namen beim Debuggen weiterhin anzeigen können.
  • Minifizieren Sie nicht in der Entwicklung, Sie verschwenden Build-Zeit und verlieren lesbare Fehler.
  • Minifizieren Sie keinen bereits minifizierten Code. .min.js-Dateien schrumpfen um ~1-3% bei der erneuten Minifizierung, während das Risiko eines Bruchs besteht.

Häufige Fehler

  • Reservierte Namen nicht konfigurieren. Dynamischer Zugriff auf Eigenschaften (obj["payment_method"]) bricht, wenn payment_method auf a verunstaltet wird.
  • Quellkarten vergessen. Ohne .map-Dateien sind Produktionsfehler unlesbar.
  • CommonJS und ESM zusammen minifizieren. Gemischte Modulsysteme benötigen sorgfältiges Tree-Shaking vor der Minifizierung.

Häufig gestellte Fragen

Typischerweise 40-70% kleiner unkomprimiert, mit weiteren 60-75% Reduzierung bei gzip- oder Brotli-Kompression. Eine 100 KB große Quelle wird oft als ~15-25 KB über das Netz geliefert.

Standardmäßiges (lokales) Verunstalten ist fast immer sicher. Aggressives Verunstalten von Eigenschaften bricht jeden Code, der Eigenschaften dynamisch zugreift. Konfigurieren Sie die Liste reserved sorgfältig, bevor Sie es aktivieren.

Ja, aktivieren Sie “Quellkarte generieren” und das Tool gibt den minifizierten Code plus eine .map-Datei zurück, die jedes Byte auf die ursprüngliche Quelle zurückverfolgt. Laden Sie beides auf Ihr CDN hoch, damit die DevTools lesbare Stack-Traces anzeigen können.

Ja, Top-Level Await, Klassenfelder, private Methoden, Nullish Coalescing, optionale Verkettung und numerische Trennzeichen werden alle unterstützt. Für sehr neue Vorschläge (Dekoratoren Stufe 3) überprüfen Sie das spezifische Flag.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

HTML-Formatter

Formatieren Sie HTML lokal im Browser mit zwei oder vier Leerzeichen Einrückung. HTML wird weder hochgeladen noch validiert.

Tool in anderen Sprachen verfügbar