JavaScript- & CSS-Minifier

Was das Tool macht

Minifizierung entfernt alles, was ein Browser nicht braucht, um deinen Code auszuführen: Leerraum, Zeilenumbrüche, Kommentare und lange Namen. Kleinere Dateien laden schneller, was Ladezeit und Core Web Vitals verbessert – besonders in Mobilfunknetzen.

Dieses Tool minifiziert JavaScript mit Terser, dem Minifier, den webpack, Rollup und Vite verwenden, und CSS mit CSSO, das Stylesheets auch umstrukturiert: Es kürzt Farben (#ffffff zu #fff), entfernt überflüssige Einheiten und Werte (0px 0px zu 0) und führt Regeln zusammen, die Selektoren oder Deklarationen teilen.

So funktioniert es

1. Füge Code in das Feld Eingabe ein, zieh eine .js- oder .css-Datei darauf oder klicke auf Beispiel.
2. Wähle JavaScript oder CSS.
3. Bei JavaScript benennt Variablennamen kürzen lokale Variablen und Parameter in einzelne Buchstaben um. Exportierte und globale Namen werden nie geändert.
4. Bei CSS fasst Doppelte Regeln zusammenführen Regeln mit gleichen Deklarationen zusammen.
5. Kopiere das Ergebnis oder lade es herunter. Die Größenzähler unter jedem Feld zeigen, wie viel du gespart hast.

Enthält das JavaScript einen Syntaxfehler, zeigt die Fehlermeldung Zeile und Spalte, sodass du direkt dorthin springen kannst.

Beispiel

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

wird zu

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Wann du es verwenden solltest

Nutze es für schnelle Einzelfälle: ein Snippet für ein CDN, ein Inline-Skript in einer HTML-E-Mail, ein Bookmarklet oder um zu prüfen, wie klein eine Bibliothek werden könnte. In einem echten Projekt sollte dein Bundler bei jedem Build minifizieren, damit der Quellcode lesbar bleibt.