What problem does it solve?
This guide eliminates common performance regressions and slow user experiences in React 19 + Vite 7 single-page applications by providing prescriptive optimizations across build, runtime, and media handling.
Core Features & Use Cases
- Build Optimization: Manual chunking, optimizeDeps, target configuration, and minifier choices to reduce initial bundle size.
- Code Splitting & Lazy Loading: Route-level splitting, dynamic imports, and preload strategies to defer heavy libraries like video.js and charting libs.
- Render Efficiency: Re-render prevention patterns, memoization guidance with React Compiler, state placement, and context splitting to minimize unnecessary updates.
- Data & Media: TanStack Query tuning, prefetch strategies, virtualization for long lists, and best practices for responsive images and video initialization.
- Bundle Analysis & Dev Workflow: Tools and CI checks to monitor asset size regressions and maintain fast HMR and developer feedback loops.
- Use Case: Audit a Vite React SPA (for example the client/ directory of peek-stash-browser) to produce prioritized fixes that improve cold-load time, runtime responsiveness, and media playback performance.
Quick Start
Analyze the client/ Vite React 19 project and produce prioritized, actionable optimizations for build config, code splitting, re-render hotspots, TanStack Query settings, and media loading.
