Encoders & Utilities

CSS- / JS-Minifier

CSS oder JavaScript minifizieren: Kommentare und Whitespace entfernen, mit Auto-Erkennung, Byte-Stats und Kopieren/Herunterladen.

What this does

CSS — strips /* comments */, collapses whitespace, removes trailing semicolons, tightens punctuation.
JavaScript — strips // line and /* block */ comments, collapses whitespace, tightens braces and parens. Preserves string and template literals.

Note: this is a safe regex minifier — no variable renaming (mangling) and no dead-code elimination. Use Terser / esbuild in your build pipeline for production-grade compression.

Über dieses Tool

CSS/JS Minifier verkleinert CSS- und JavaScript-Dateien durch Entfernen von Whitespace, Kommentaren, redundanten Tokens und (für JS) durch sichere syntaktische Transformationen. Ziel: kleinere Dateien, schnellere Auslieferung. Sie fügen den Code ein, wählen Sprache und Optionen, und sehen das minifizierte Ergebnis plus Größenvergleich (originale Bytes, minifizierte Bytes, gzippte minifizierte Bytes, Einsparung in Prozent).

Das Tool nutzt etablierte Bibliotheken: esbuild oder terser für JS, cssnano oder lightningcss für CSS. Alle Operationen sind syntax-sichere Transformationen — der minifizierte Code verhält sich exakt wie das Original, ist nur dichter geschrieben. Optional aktivieren Sie aggressivere JS-Transformationen (Property-Mangling, Dead-Code-Elimination), die in seltenen Fällen Verhalten ändern können — entsprechend mit Warnungen versehen.

Wann Sie dieses Tool nutzen sollten

Quick-Test einer Inline-Optimierung. Sehen, wie viel ein kleiner CSS- oder JS-Block einspart.
One-off-Minifizierung. Wenn Sie keinen Build-Prozess haben und schnell etwas verkleinern müssen.
Vor/Nach-Vergleich. Verstehen, wo Einsparungspotenziale liegen.
Lernen. Sehen, was Minifier eigentlich tun — Variablen umbenennen, Kommentare entfernen, Whitespace strippen.

Minify vs. Build-Prozess

Für produktive Sites integrieren Sie Minifizierung in Ihren Build (Webpack, esbuild, Vite, Parcel) — automatisiert, deterministisch, mit Source-Maps. Unser Tool ist für Ad-hoc-Fälle und Erkundung gedacht. Source-Maps generieren wir auf Anfrage: sie erlauben, im Browser-Debugger den minifizierten Code zum Originalcode zurückzuverfolgen.

Häufige Fragen

Wie viel Einsparung ist typisch?

Bei CSS 20–40 % Reduktion (vor allem aus Whitespace und Kommentaren). Bei JavaScript 30–60 % vor Gzip, 60–80 % nach Gzip (Minify + Variable-Mangling). Nach Gzip ist der Unterschied zwischen minifiziert und nicht-minifiziert kleiner, weil Gzip selbst viel Whitespace komprimiert — aber Minify+Gzip schlägt nur-Gzip immer deutlich.

Funktioniert das mit modernem JavaScript (ES2020+)?

Ja — esbuild und terser parsen modernes ECMAScript korrekt. Async/await, Optional Chaining, Nullish Coalescing, Top-Level-await — alles unterstützt. Wenn Sie für ältere Browser bauen, brauchen Sie zusätzlich Transpilierung (Babel, esbuild target=es2015), das ist eine andere Operation als Minify und kein Teil dieses Tools.

Werden meine Sourcen an einen Server geschickt?

Nein. Die Minifizierung läuft im Browser über WebAssembly (esbuild-wasm) bzw. JS-implementierte Parser. Auch große Dateien (mehrere MB) werden lokal verarbeitet. Wenn Sie ungerne Quellcode in einen Browser packen, beachten Sie: nichts verlässt Ihren Rechner, aber Browser-Crash-Reports oder Extensions könnten theoretisch Daten sehen — bei extremer Sensibilität verwenden Sie einen CLI-Minifier.

Brauche ich Source-Maps?

Für Production-Code: ja, separat hochladen — sie erlauben, im Browser-Debugger Stack-Traces auf den Originalcode zurückzuführen. Privacy-Hinweis: Source-Maps offenbaren Ihren Originalcode jedem, der sie laden kann. Hosten Sie sie unter einer URL, die nur autorisierte Mitarbeiter kennen (z. B. ein separates CDN mit Auth), oder lassen Sie sie nur in Entwicklungs-/Staging-Umgebungen aktiv sein.