Center-Website: Webpack Bundle Analysis

The public Center Website (apps/center-website, among others, base template under /{centerSlug}/…) uses the same Next.js Webpack Bundle Analyzer integration as the dashboard: When building with ANALYZE=true, interactive Treemap Reports will open after completion (Client and Server Bundles).

Prerequisites

• Monorepo root with installed dependencies (pnpm install)
• As with a normal Production build: sufficient RAM (default NODE_OPTIONS=--max-old-space-size=4096 in the script)

Command

From the Repository Root:

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

Dashboard (Webpack report after next build, local):

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

(ANALYZE=true in apps/dashboard/package.json; active configuration: next.config.js with @next/bundle-analyzer.)

The script first runs prisma generate, like build, and then builds the app. After next build, the analyzer opens the HTML reports (locally).

Reports

After the build, the HTML files are located in apps/center-website/.next/analyze/ (client.html, nodejs.html, edge.html). Open them in the browser and view the largest tiles in the client treemap.

Insights (Analysis Status)

• Many /[slug]/… routes report First Load JS ~1.4–1.5 MB — substantial client bundles are closely related to the shared client graph. The homepage /{slug} now only loads a small route chunk due to manifest lazy loading (build output "Size"); the large First Load JS value still comes from the shared Vendor/Shared graph.
• template-registry (Server) loads manifests per template through dynamic import() (load-template-manifest + React cache). For the client: template-client-registry for cookie/overlay/chat loaders without the server registry.
• import * as lucide-react pulls all icons into the bundle. This is unnecessary for homepage tiles: only definitely defined icon names are selectable (tile-form-dialog.tsx) in the dashboard.
• components/ui/dynamic-icon.tsx still employs the full Lucide library (Services/Shops/HBB — free icon names from the DB). It should only be refactored there if the number of icons can be limited.

Implementation: Homepage Tiles without Full-Lucide

Instead of namespace import, resolveHomepageTileLucideIcon from apps/center-website/lib/tile-lucide-icons.ts is used (also in lib/cms/cms-mapper-tiles.ts and in the Style Guide). New tile icons should be added first in the dashboard select, then updated in tile-lucide-icons.ts.

Monorepo: outputFileTracingRoot

In apps/center-website/next.config.js, outputFileTracingRoot is set to the monorepo root — avoiding incorrect lockfile/trace warnings and suitable for deployments with output: 'standalone' (e.g., Render).

Base Background (AnimatedBackground)

The component apps/center-website/components/ui/animated-background.tsx is attached to PageLayout and many base pages. It uses soft radial and linear gradients with CSS-only animations (transform / opacity in globals.css, classes animate-ambient-*) — without extensive blur filters, without mouse tracking, and without rotating cone gradients. On devices with limited resources or prefers-reduced-motion, only the static gradient remains (readLeanDeviceVisuals in lib/client/read-lean-device-visuals.ts).

Distinction

• Bundle Analyzer: displays module sizes and dependencies in the Webpack output — ideal for identifying heavy client chunks (e.g., chat, 3D, charts) and possibly splitting them with next/dynamic.
• Lighthouse: measures LCP, TBT, network etc. in the running or exported page context — supplementary, not a replacement.

See also: Public Center Website API — Contract (data flow of the public pages).