Minification
Minifizierung (Code-Größenreduzierung)
Der Prozess des Entfernens aller unnötigen Zeichen aus Quellcode (Leerzeichen, Kommentare, lange Variablennamen), ohne dessen Funktionalität zu verändern, um die Dateigröße zu reduzieren und die Ladezeiten von Webseiten zu verbessern.
Technisches Detail
JavaScript-Minifier (Terser, esbuild, SWC) führen Tokenisierung, AST-Analyse, Dead-Code-Eliminierung (Tree Shaking), Variablen-Umbenennung (Mangling), Konstanten-Faltung und Kurzschluss-Optimierungen durch. CSS-Minifier (cssnano, Lightning CSS) entfernen Leerzeichen, verschmelzen doppelte Selektoren, kürzen Farbwerte (#ffffff → #fff) und eliminieren überflüssige Einheiten (0px → 0). HTML-Minifier entfernen optionale Tags, Kommentare und Attribut-Anführungszeichen. Typische Einsparungen: JS 40-60%, CSS 20-40%, HTML 10-20%. Source Maps (.map-Dateien) bewahren die Zuordnung zum ursprünglichen Code für das Debugging. Die Build-Pipeline wendet typischerweise Minifizierung nach Bundling und vor Gzip/Brotli-Komprimierung an.
Beispiel
```javascript
// Simple CSS minifier
function minifyCSS(css) {
return css
.replace(/\/\*[\s\S]*?\*\//g, '') // remove comments
.replace(/\s+/g, ' ') // collapse whitespace
.replace(/\s*([{};:,])\s*/g, '$1') // remove around symbols
.trim();
}
// 1024 bytes → 612 bytes (40% reduction)
```