Welche Techniken sollte man anwenden, um die JS-Bundle-Größe zu reduzieren?
Kurze Antwort: Die JS-Bundle-Größe sinkt nicht durch einen einzelnen Griff, sondern durch einen Zyklus aus Messen und Beschneiden: erst Bundle-Analyse, dann Splitting, Shaking und Verzögern, am Ende ein Budget gegen Regressionen.
Die Techniken
- Bundle-Analyse: die größten Module sichtbar machen; in den meisten Projekten tragen wenige Bibliotheken den Großteil des Gewichts.
- Code-Splitting: dynamische Imports pro Route und Komponente; Code für unsichtbare Modals, Karten und Charts gehört nicht in den Erstload.
- Tree-Shaking: nebenwirkungsfreie Module und benannte Imports; Importmuster reparieren, die ganze Bibliotheken hereinziehen.
- Abhängigkeitsdiät: leichte Alternativen oder eingebaute APIs statt schwerer Bibliotheken; doppelte Versionen deduplizieren.
- Verzögern: Analytics- und Marketing-Skripte nach der Interaktion laden.
- Moderne Ziele: aktuellen Browsern moderne Builds liefern und die Polyfill-Last senken.
Für Dauerhaftigkeit ein Größenbudget in der CI definieren: Pull Requests über der Schwelle werden nicht gemerged. Die Wirkung wird über die Script-Auswertungszeit in Lighthouse sowie INP und LCP in Felddaten gegen die Basislinie validiert.