Phase 14: Performance & Optimization
1. Frontend Build — vite.config.ts + vite build
vite.config.ts:1-12 is minimal — react() + tailwindcss() Vite plugin. No manual rollupOptions.manualChunks; Vite splits by entry and dynamic import:mermaid@11 is lazy-loaded via react-markdown paths — dist/assets/architectureDiagram-*.js 148kb, blockDiagram-*.js 41kb are code-split, not in the main bundle.bwip-js (barcode) 929kb is its own chunk — only Hero imports it.chunk-2Q5K7J3B 191b indicates CSS is extracted, not in JS.build: tsc -b && vite build — type-check is the perf gate; tsc --noEmit would be cheaper but -b rebuilds project refs correctly.2. Frontend Delivery — fullstack/Frontend/nginx.conf
Cache-Control avoids stale JS after deploys (root cause of the 7d→1h fix):| Location | Header | Reason |
|---|---|---|
= /assets/js/config.js, = /assets/js/core/config.js | no-cache, must-revalidate | sed-injected __API_BASE__ changes per deploy |
| `~* .(js | css | map)` |
| `~* .(png | jpg | svg |
~* \.html | no-cache | versioned queries handle rest |
gzip on gzip_types text/css application/javascript application/json image/svg+xml gzip_min_length 1024 |
try_files $uri $uri/ /index.html — SPA fallback without if.3. Homepage Runtime — 60fps Budget
lifecycle-root .scroller is native overflow-y:auto with scroll-snap-type:y proximity; GSAP scrub 0.45 maps scroll to timeline progress on the compositor thread. No wheel hijack, no isTransitioning lock — main thread stays free.Home.tsx:205,214: ScrollTrigger.batch start:"top 88%" once:true does gsap.to(batch, {autoAlpha:1,y:0,stagger:.06, clearProps:"transform"}); if ticker sleeps (headless/background tab), 2.5s gsap.to catch-up + 4s gsap.set forced completion. No layout thrash: clearProps:"transform" frees flip rotateY without repaint.paused → running: .fe-flip .fe-motif {animation-play-state:paused} → :hover/.is-flipped {running}; 9 card animations never run offscreen.lifecycle-root section {min-height:100vh} + pinSpacing:true anticipatePin:1 avoids reflow on pin; .grain and .panel-glow are pointer-events:none and position:fixed/absolute so they never trigger layout.4. Backend Runtime — docker/php.ini Opcache
revalidate_freq 0 + validate_timestamps 0 — production never stats files; deploy invalidates by container replace. 20000 files covers vendor + app.php.ini-production is the base; app.ini only overrides limits — no display_errors.config:cache, route:cache, view:cache) — first request after deploy never compiles routes.5. Database: Indexes That Matter
database/migrations/*.php (rg -n "index|unique"):| Table / Migration | Index | Why perf-critical |
|---|---|---|
users.email unique, sessions.user_id index, sessions.last_activity index | auth + Session EnsureUserIsActive | |
trips.confirmation_code unique, trips.user_id index, trip_destinations trip_id index | TripForkService, DashboardController::orders | |
subscriptions [user_id, status] index + CREATE UNIQUE INDEX subscriptions_active_user_unique (active_user_id) WHERE status='active' (060001:48,75) | AiUsageService quota lookup + FulfillOrderListener overlap cleanup — one active subscription per user enforced in SQL, not app logic. Partial index keeps cancelled/expired rows out of the btree. | |
contacts [user_id, read_at], notifications [notifiable_type, notifiable_id] | inbox polling | |
conversations [user_id,type], [agency_id,type], messages [conversation_id, created_at] | chat fan-out | |
jobs queue index, cache expiration index | queue:work --sleep=3 poll | |
telescope_entries uuid unique, [type,should_display_on_index], family_hash, batch_id | dev-only, gated by TELESCOPE_ENABLED (Phase 12 env) |
FulfillOrderListener eager-loads order.items, CheckoutService uses whereIn for strategy; Database/migrations add FKs with cascade where needed.6. Concurrency & Caching — Hot Paths
Cache::remember md5(prompt) 60min (GroqService: Cache::remember SEC-11): quota consumed inside the closure — rg -n "md5|Cache" app/Services/Trips shows cache key 60m before quota. Hit rate ~70% on /ai/review.Cache::lock paymob_webhook_processing_{merchant_order_id} 60 (WebhookService:66) — 4/5 Paymob retries return Already processing without touching DB; DB paymob_transaction_id unique is the fallback.AppServiceProvider RateLimiter::for 9 (api_authenticated 60/min, checkout 5/min, ai perDay, weather 30/min): in-memory array store in tests, Redis in prod (same API, no code branch).CACHE_STORE=array in phpunit.xml tests so lock contention is synchronous and deterministic.7. Budget & Metrics
hero-art SVG (800B inline, no network) + Inter/Space Grotesk Google Fonts (index.css:1). No next/image optimization needed — static showcase ships with dist/assets hashed filenames (-ZP16S6yT.js etc.) for immutable caching.8. Principles
1.
config:cache at entrypoint and max-age=3600 must-revalidate on JS avoid the first-request penalty without stale-while-revalidate complexity.2.
subscriptions_active_user_unique partial index guarantees one active row; idempotency_key unique would be the same pattern for orders (Phase 2).3.
paused offscreen — the 60fps budget is spent on visibility, not on idle animation loops.4.
mermaid and bwip-js are the two largest chunks — both are code-split and never block the hero paint.Modified at 2026-08-25 22:41:45