Center-Website: Webpack-Bundle-Analyse

Die öffentliche Center-Website (apps/center-website, u. a. Basis-Template unter /{centerSlug}/…) nutzt dieselbe Next.js Webpack Bundle Analyzer-Einbindung wie das Dashboard: Beim Build mit ANALYZE=true werden nach Abschluss interaktive Treemap-Reports geöffnet (Client- und Server-Bundles).

Voraussetzung

• Monorepo-Root mit installierten Dependencies (pnpm install)
• Wie bei einem normalen Production-Build: ausreichend RAM (Standard NODE_OPTIONS=--max-old-space-size=4096 im Script)

Befehl

Vom Repository-Root:

pnpm --filter @cockpitos/center-website run build:analyze

Dashboard (Webpack-Report nach next build, lokal):

pnpm --filter @mall-os/dashboard run build:analyze

(ANALYZE=true in apps/dashboard/package.json; aktive Konfiguration: next.config.js mit @next/bundle-analyzer.)

Das Script führt wie build zuerst prisma generate aus und baut dann die App. Nach next build öffnet der Analyzer die HTML-Übersichten (lokal).

Reports

Nach dem Build liegen die HTML-Dateien unter apps/center-website/.next/analyze/ (client.html, nodejs.html, edge.html). Im Browser öffnen und die größten Kacheln im Client-Treemap ansehen.

Erkenntnisse (Stand Analyse)

• Viele /[slug]/…-Routen melden First Load JS ~1,4–1,5 MB — schwere Client-Bundles hängen stark mit dem gemeinsamen Client-Graph zusammen. Die Startseite /{slug} lädt seit Manifest-Lazyloading nur noch einen kleinen Routen-Chunk (Build-Ausgabe „Size“); der große First Load JS-Wert kommt weiterhin vom geteilten Vendor/Shared-Graph.
• template-registry (Server) lädt Manifeste pro Template per dynamischem import() (load-template-manifest + React cache). Client: template-client-registry für Cookie-/Overlay-/Chat-Loader ohne die Server-Registry.
• import * as lucide-react zieht alle Icons ins Bundle. Für Homepage-Kacheln ist das unnötig: Im Dashboard sind nur fest definierte Icon-Namen wählbar (tile-form-dialog.tsx).
• components/ui/dynamic-icon.tsx nutzt weiterhin die volle Lucide-Library (Services/Shops/HBB — freie Icon-Namen aus der DB). Dort nur umbauen, wenn Icon-Mengen eingrenzbar sind.

Umsetzung: Homepage-Kacheln ohne Full-Lucide

Statt Namespace-Import wird resolveHomepageTileLucideIcon aus apps/center-website/lib/tile-lucide-icons.ts verwendet (u. a. in lib/cms/cms-mapper-tiles.ts und im Style-Guide). Neue Kachel-Icons: zuerst im Dashboard-Select ergänzen, dann in tile-lucide-icons.ts nachziehen.

Monorepo: outputFileTracingRoot

In apps/center-website/next.config.js ist outputFileTracingRoot auf die Monorepo-Wurzel gesetzt — vermeidet falsche Lockfile-/Trace-Warnungen und passt zu Deployments mit output: 'standalone' (z. B. Render).

Basishintergrund (AnimatedBackground)

Die Komponente apps/center-website/components/ui/animated-background.tsx hängt u. a. an PageLayout und vielen Basis-Seiten. Sie nutzt weiche Radial- und Linear-Verläufe mit CSS-only-Animationen (transform / opacity in globals.css, Klassen animate-ambient-*) — ohne großflächige blur-Filter, ohne Maus-Tracking und ohne rotierende Kegelverläufe. Auf Geräten mit wenig Ressourcen oder prefers-reduced-motion bleibt nur der statische Verlauf (readLeanDeviceVisuals in lib/client/read-lean-device-visuals.ts).

Abgrenzung

• Bundle-Analyzer: zeigt Modulgrößen und Abhängigkeiten im Webpack-Output — ideal, um schwere Client-Chunks (z. B. Chat, 3D, Charts) zu finden und ggf. mit next/dynamic zu splitten.
• Lighthouse: misst LCP, TBT, Netzwerk usw. am laufenden oder exportierten Seitenkontext — ergänzend, kein Ersatz.

Siehe auch: Public Center Website API — Vertrag (Datenfluss der öffentlichen Seiten).