Next.js Turbopack Bundle Analyzer & Streaming Suspense Optimizer

### Next.js Performance & Streaming Blueprint #### 1. Eliminate TTFB Blocking via Streaming `<Suspense>` Currently, the page awaits 4 queries sequentially, blocking the response stream for 1.2s. Remove the `await` from the page root. Stream the shell immediately: ```tsx // src/app/analytics/page.tsx import { Suspense } from 'react'; import { MetricCardsSkeleton, ChartSkeleton } from './skeletons'; import { MetricCards } from './MetricCards'; import { RevenueChart } from './RevenueChart'; export default function AnalyticsPage() { return ( <div> {/* Shell HTML sends to browser in <100ms! */} <h1>Analytics Overview</h1> {/* Fast queries resolve first */} <Suspense fallback={<MetricCardsSkeleton />}> <MetricCards /> </Suspense> {/* Heavy 1.2s query streams in asynchronously without blocking shell */} <Suspense fallback={<ChartSkeleton />}> <RevenueChart /> </Suspense> </div> ); } ``` #### 2. Dynamic Code Splitting for Recharts (Save 340 kB) ```tsx import dynamic from 'next/dynamic'; // Lazy load heavy chart bundle; zero impact on initial page JS const InteractiveRechartsArea = dynamic( () => import('./InteractiveRechartsArea').then(mod => mod.InteractiveRechartsArea), { ssr: false, loading: () => <div className="h-64 animate-pulse bg-muted" /> } ); ``` #### 3. `next.config.ts` Package Import Optimization ```typescript const nextConfig = { experimental: { optimizePackageImports: ['lucide-react', 'date-fns', 'recharts'], }, }; ``` *Impact:* First Load JS drops from 675 kB to 142 kB; mobile LCP drops from 3.6s to 1.1s.