perf: Schritt 32 — Lazy Loading & Caching-Strategie

Cache-Control (server/index.js):
- Bilder/Fonts: public, max-age=2592000, immutable (30 Tage)
- HTML/JS/CSS/JSON: no-cache, must-revalidate (ETag-Revalidierung)
  → Deployment-Updates greifen sofort, unveränderte Dateien = 304 ohne Transfer
- API: no-store (kein Browser-Caching von Nutzerdaten)

Service Worker (public/sw.js → v3):
- Drei getrennte Caches: shell-v3, pages-v3, assets-v3
- App-Shell + alle Seiten-Module beim Install vorab gecacht
- Stale-While-Revalidate für App-Shell + Seiten-JS:
  sofortiger Render aus Cache, Hintergrund-Update ohne Blockierung
- Cache-First für Bilder/Fonts (seltene Änderungen)
- postMessage({ type: 'SW_UPDATED' }) bei Aktivierung neuer Version

Modul-Cache + Update-Toast (public/router.js):
- moduleCache Map: dynamische imports werden einmalig gespeichert,
  wiederholte Navigation braucht keinen Import-Lookup mehr
- SW_UPDATED-Handler: leert moduleCache + zeigt Update-Toast (8s)

Preconnect + Preload (public/index.html):
- <link rel="preconnect" href="https://unpkg.com">
- <link rel="dns-prefetch" href="https://openweathermap.org">
- <link rel="preload" href="/api.js" as="script">
- <link rel="preload" href="/router.js" as="script">

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-24 22:06:17 +01:00
parent dd8ad80eb4
commit 81d4000ee1
4 changed files with 181 additions and 34 deletions
+24 -2
View File
@@ -67,11 +67,33 @@ app.use(express.urlencoded({ extended: true, limit: '1mb' }));
app.use(sessionMiddleware);
// --------------------------------------------------------
// Statische Dateien (Frontend)
// API-Antworten: kein Browser-Caching (Sicherheit + Aktualität)
// --------------------------------------------------------
app.use('/api/', (req, res, next) => {
res.setHeader('Cache-Control', 'no-store');
next();
});
// --------------------------------------------------------
// Statische Dateien (Frontend) — differenzierte Caching-Strategie
//
// HTML + JS + CSS: no-cache (Browser revalidiert via ETag/304, kein stale Content
// nach Deployment). Bei unverändertem File → 304 Not Modified ohne Übertragung.
// Bilder + Icons + Fonts: 30 Tage immutable (ändern sich praktisch nie).
// manifest.json + sw.js: no-cache (PWA-Updates sollen sofort greifen).
// --------------------------------------------------------
app.use(express.static(path.join(__dirname, '..', 'public'), {
maxAge: process.env.NODE_ENV === 'production' ? '7d' : 0,
etag: true,
lastModified: true,
setHeaders(res, filePath) {
const ext = path.extname(filePath).toLowerCase();
if (['.png', '.jpg', '.jpeg', '.ico', '.svg', '.webp', '.woff2', '.woff'].includes(ext)) {
res.setHeader('Cache-Control', 'public, max-age=2592000, immutable'); // 30 Tage
} else {
// HTML, JS, CSS, JSON, manifest, sw — immer revalidieren
res.setHeader('Cache-Control', 'no-cache, must-revalidate');
}
},
}));
// --------------------------------------------------------