performance-optimization

Use React.lazy with dynamic import() for each route component and wrap the router in Suspense with a fallback skeleton. This loads each page's JavaScript only when the route is visited instead of bundling everything upfront.

Set build.rollupOptions.output.manualChunks in vite.config.ts, mapping chunk names to module arrays such as vendor: ["react", "react-dom"]. Analyze the result with vite-bundle-visualizer or source-map-explorer to verify the split.

Static assets with content hashes in filenames should use Cache-Control: public, max-age=31536000, immutable. API responses benefit from stale-while-revalidate patterns, while sensitive responses use no-cache, no-store, must-revalidate.

Yes, the Next.js Image component improves LCP and CLS by serving responsive sizes, lazy loading offscreen images, and reserving layout space with explicit width and height. Preload the LCP image with fetchpriority="high" for further gains.

Use virtualization with libraries like @tanstack/react-virtual when rendering lists of 100 or more items. Rendering thousands of DOM nodes blocks the main thread; virtualization renders only visible rows plus a small overscan buffer.

Poor INP results from long tasks blocking the main thread during interactions, such as synchronous computation or rendering too many DOM nodes. Break up work with requestIdleCallback and virtualize large lists to keep interactions under 200ms.