Die minifizierte Ausgabe
Der Formatierer im Minifizierungsmodus bei der obigen Eingabe erzeugt:
.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e5e7eb}.nav-link{color:#374151;text-decoration:none;font-weight:500;transition:color .15s ease}.nav-link:hover{color:#3b82f6}.card{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}Was die Minifizierung entfernt
Kommentare, Leerzeichen, redundante Zeichen, Farbkürzung (#ffffff wird zu #fff), führende Nullen (0.75rem wird zu .75rem).
Minifizierung vs. Kompression
| Dateizustand | Größe |
|---|---|
| Original CSS | 100 KB |
| Nach Minifizierung | ~72 KB |
| Nach gzip (ohne Minifizierung) | ~22 KB |
| Nach gzip + Minifizierung | ~20 KB |
Integration mit Build-Tools
Vite und Rollup verwenden esbuild für die CSS-Minifizierung in Produktions-Builds. webpack benötigt css-minimizer-webpack-plugin. PostCSS mit cssnano gibt die meiste Kontrolle.
Wann man einen Online-Minifizierer verwendet
Verwende ihn, wenn du überprüfen musst, wie aggressiv eine Datei minifiziert wird, bevor du den Build konfigurierst, oder wenn du mit einem CSS-Ausschnitt arbeitest, der nicht zu einem Projekt mit Build-Pipeline gehört.