Wie Sie Ihre JavaScript-Bundle-Größe um 70 % reduzieren

Die meisten Webanwendungen liefern zu viel Code aus. Eine durchschnittliche Webseite lädt 1,7 MB JavaScript. Entwickler nutzen nur etwa 35 % des von ihnen bereitgestellten Codes.

Kleine Bundles verbessern Ihre Core Web Vitals. Sie erzielen schnellere Werte beim Largest Contentful Paint und der Time to Interactive.

Befolgen Sie diese 10 Schritte, um Ihre Bundle-Größe zu verringern:

  • Tree shaking: Entfernt ungenutzten Code. Verwenden Sie die ES-Modul-Syntax, um dies zu ermöglichen.
  • Code splitting: Zerlegt Ihren Code in kleinere Teile.
  • Dynamic imports: Laden Sie Code nur dann, wenn ein Benutzer ihn benötigt.
  • Image optimization: Verwenden Sie URL-basierte Transformationen anstelle großer Bibliotheken.
  • Dependency auditing: Ersetzen Sie schwere Bibliotheken durch leichte.
  • Minification: Verkleinern Sie Ihre Codemedateien.
  • Compression: Verwenden Sie Brotli für bessere Ergebnisse als Gzip.
  • Dead code elimination: Entfernen Sie nicht erreichbare Code-Zweige.
  • Lazy loading: Verzögern Sie das Laden nicht kritischer Komponenten.
  • Polyfill pruning: Liefern Sie nur die Polyfills aus, die Ihre Benutzer benötigen.

Drei Techniken funktionieren am besten in Kombination. Lazy Loading, Polyfill-Pruning und die Entfernung von totem Code können Ihre Größe um 15–30 % reduzieren.

Prüfen Sie Ihre Abhängigkeiten, bevor Sie sie installieren. Verwenden Sie npx bundle-phobia, um die Größen zu überprüfen.

Zum Beispiel: • date-fns (13 KB) ist besser als moment.js (67 KB). • dayjs (2 KB) ist eine großartige Alternative zur Datumsformatierung. • Verwenden Sie lodash-es anstelle der vollständigen lodash-Bibliothek.

Überprüfen Sie Ihren Fortschritt mit diesen Zielwerten: • Gesamte JS-Größe: Streben Sie weniger als 120 KB an. • LCP: Streben Sie weniger als 2,5 s an. • TTI: Streben Sie weniger als 3,5 s an.

Vermeiden Sie diese Fehler: • Bereitstellung von Development-Builds anstelle von Production-Builds. • Importieren ganzer Bibliotheken, wenn Sie nur eine einzige Funktion benötigen. • Vergessen, die Brotli-Komprimierung auf Ihrem Server zu aktivieren.

Wenn Sie Tree Shaking, Code Splitting und Dependency Auditing einsetzen, können Sie Ihre Payload in einem einzigen Sprint um 50–70 % reduzieren.

Quelle: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g