Initializing, please wait a moment

CSS Minifier vs Uglifier vs Tree-Shaking

Zuletzt geprüft: 2026-04-27. Öffnen Sie den CSS-Minifier für Minifizierung im Browser, ohne den Quellcode hochzuladen.

30-Sekunden-Antwort. Drei verschiedene Größenreduzierungstechniken zielen auf dasselbe Ziel, arbeiten aber auf verschiedenen Ebenen. Der Minifier entfernt Whitespace und Kommentare. Der Uglifier benennt Symbole (Variablen, Funktionsnamen) zu kürzeren Formen um. Tree-Shaking entfernt Code, den der Rest des Bundles nie verwendet. Sie stapeln sich: ein minifiziertes-und-uglifiziertes Bundle, das tree-shaken wurde, ist kleiner als jede einzelne Technik allein.

Minifier - Whitespace und Kommentare

Minifier - Whitespace und Kommentare: CSS Minifier entfernt Zeichen die der Browser ignoriert - keine Selektor-Umbenennung und kein Drop ungenutzter Regeln wie Uglifier/Tree-Shaker.

Moderne CSS-Minifier gehen über Whitespace hinaus: kollabieren 0px zu 0, ersetzen #ffffff durch #fff, entfernen redundante Standardwerte, fügen benachbarte Selektoren mit identischen Regeln zusammen. Jedes rasiert einen kleinen Prozentsatz ab; der kumulative Effekt ist bedeutsam.

Uglifier - umbenennen, um Bytes zu sparen

Uglifier - umbenennen, um Bytes zu sparen: kuerzt Identifier wo sicher - bei CSS riskanter als reines Minify, weil Klassennamen oft HTML und Runtime treffen muessen.

Der Uglifier muss die Scope-Regeln des Codes verstehen - Sie können eine lokale Variable frei umbenennen, aber das Umbenennen einer globalen bricht alles, was vom Namen abhängt. Tools wie Terser, esbuild und SWC tun das sicher, indem sie den Scope-Graphen analysieren.

Für CSS ist das Äquivalent das Umbenennen von Klassennamen. Build-Pipelines, die CSS-Klassen zu .a, .b, .c hashen, sparen Bytes auf die gleiche Weise - aber nur, wenn das HTML mit derselben Pipeline gebaut wird, damit die Referenzen übereinstimmen.

Tree-Shaking - löschen, was nichts verwendet

Tree-Shaking - loeschen, was nichts verwendet: Build-Tools streichen ungenutzte Exports nach Analyse - braucht Modulgraph; CSS Minifier allein kann eine App nicht shaken.

Tree-Shaking erfordert, dass der Quellcode in einem Format ist, das die Analyse unterstützt - native ES-Module ("import" / "export") statt CommonJS ("require"). Bibliotheksautoren haben Jahre damit verbracht, zu ESM zu migrieren, speziell um Tree-Shaking für ihre Konsumenten effektiv zu machen.

Für CSS hat Tree-Shaking ein Parallel namens PurgeCSS oder TailwindCSS' JIT-Modus: scannen Sie das HTML und schließen Sie nur CSS-Regeln ein, die einem tatsächlichen Klassennamen im Markup entsprechen. Tailwind liefert Tausende von Utility-Klassen aus; der Produktions-Build enthält nur die in Verwendung.

Wonach man zuerst greift

Wonach man zuerst greift ist CSS Minifier fuer fertige Stylesheets; Tree-Shaking im App-Build; Uglify als fortgeschrittenen JS-Schritt, nicht als ersten CSS-Fix.

Der CSS-Minifier auf dieser Seite übernimmt den ersten Schritt - Stylesheet einfügen, komprimierte Ausgabe kopieren; keine Datei verlässt das Gerät. Uglification und Tree-Shaking benötigen ein Build-Tool (webpack, esbuild oder Vite), das den vollständigen Modulgraphen lesen kann.

Für ein nicht-gebündeltes Projekt, in dem Sie nur ein kleineres Stylesheet wollen, führen Sie den CSS-Minifier auf dem finalen CSS aus. Für breiteren Inhalt zu diesen Techniken siehe CSS-Minifier vs Compressor oder wie man CSS und JS für Cloud Run Cold Start minifiziert. Das vollständige Set: Entwickler-Tools-Hub.