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.

Minifier - Whitespace und Kommentare

Die einfachste Taktik: nehmen Sie 10 KB formatiertes CSS oder JS und entfernen Sie jedes Leerzeichen, jeden Zeilenumbruch und jeden Kommentar, der das Parsing nicht beeinflusst. Die Ausgabe funktioniert identisch zur Eingabe, nimmt aber 30-50% weniger Platz ein. Das macht der CSS-Minifier für Stylesheets.

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

Spezifisch für JavaScript. Nimmt const calculateMonthlyTotal = ... und benennt es zu const a = ... um. Der kürzere Name ist kleiner. Wiederholt über Tausende von Bezeichnern hinweg, summieren sich die Einsparungen.

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

Das große. Wenn Sie eine Bibliothek importieren und eine Funktion von fünfzig verwenden, sendet naives Bundling alle fünfzig. Tree-Shaking analysiert den Import-Graphen und schließt nur Funktionen ein, die tatsächlich vom Entry-Point Ihrer App aufgerufen werden. Neunundvierzig Funktionen verschwinden aus dem Ausgabe-Bundle.

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

Verwenden Sie alle drei, wenn die Build-Pipeline sie unterstützt. Die Reihenfolge: tree-shake zuerst (eliminiert die größten Brocken), dann minifizieren und uglifizieren Sie das Ergebnis. Moderne Bundler (Vite, esbuild, Rollup, Webpack 5+) machen alle drei in einem Durchgang mit einem einzigen Config-Flag.

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.