Verwaltung statischer Assets: CDN-Auslieferung mit Cache Busting

Dieser Artikel erklärt, wie wir CSS, JavaScript und andere statische Assets effizient verwalten und ausliefern.

Das Problem: Statische Assets müssen optimiert werden

Eine typische Seite lädt:

  • CSS-Dateien: Stylesheets für Layout und Design

  • JavaScript-Dateien: Anwendungscode und Bibliotheken

  • Bilder: Produktbilder, Vorschaubilder, Icons

  • Schriftarten: Webfonts für Typografie

Ohne Optimierung:

  • Langsame Downloads: Große Dateien brauchen Zeit

  • Kein Caching: Bei jedem Besuch erneut herunterladen

  • Keine Komprimierung: Verschwendete Bandbreite

  • Kein CDN: Langsam für globale Nutzer

Dies führt zu Ladezeiten von 3-5 Sekunden.

Die Lösung: S3 + CloudFront + Cache Busting

Wir verwenden eine dreiteilige Strategie:

  1. S3-Speicher: Skalierbarer Objektspeicher für Assets
  2. CloudFront CDN: Globale Edge-Standorte für schnelle Auslieferung
  3. Cache Busting: Versionsbasierte URLs erzwingen Aktualisierungen

Speicherung statischer Assets

Statische Assets werden in S3 gespeichert:

  • S3-Bucket: Objektspeicher für statische Dateien

  • Inhalt: CSS, JavaScript, Bilder, Schriftarten

  • Organisation: Strukturiert nach Asset-Typ

CloudFront-Auslieferung

CloudFront liefert statische Assets aus:

  • Edge-Standorte: Globales CDN für schnelle Auslieferung

  • Caching: Lange TTL für statische Assets

  • Komprimierung: Gzip für textbasierte Assets

  • SSL/TLS: HTTPS für alle Asset-Auslieferungen

Cache Busting

Wir verwenden Versionierung für Cache Busting:

  • Versionsnummern: Asset-Version im Dateinamen

  • Manifest: Zentrale Registrierung der Asset-Versionen

  • Automatische Aktualisierungen: Neue Version löst Cache-Invalidierung aus

Asset-Optimierung

Wir optimieren Assets für die Leistung:

  • Minifizierung: CSS- und JavaScript-Minifizierung

  • Bildoptimierung: WebP-Format, responsive Bilder

  • Sprite Sheets: CSS-Sprites für Icons

  • Code-Splitting: Lazy Loading für nicht-kritische Assets

Asset-Pipeline

Die Asset-Pipeline durchläuft diese Stufen:

  1. Quell-Assets: Ursprüngliches CSS, JavaScript und Bilder
  2. Minifizierung: Leerzeichen entfernen, Variablennamen verkürzen
  3. Versionierung: Versions-Hash zum Dateinamen hinzufügen
  4. S3-Upload: Im Objektspeicher ablegen
  5. CloudFront CDN: An Edge-Standorte verteilen
  6. Browser-Cache: Client-seitiges Caching

Einbindung von Assets

Assets werden in Templates eingebunden:

  • CSS: <link rel="stylesheet">

  • JavaScript: <script src="">

  • Bilder: <img src="">

  • Version: Automatisch aus dem Manifest eingebunden

Zusammenfassung

Die Verwaltung statischer Assets bietet:

  • S3-Speicher: CSS, JavaScript, Bilder, Schriftarten

  • CloudFront CDN: Schnelle globale Auslieferung

  • Cache Busting: Versionsnummern für Aktualisierungen

  • Optimierung: Minifizierung, Komprimierung, Optimierung

  • Automatische Aktualisierungen: Versionierte Asset-Auslieferung