react-spa-performance

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.