react-vite-best-practices

Reduce React Vite bundle size by applying manual chunks, minification, and route-based lazy loading with dynamic imports. Run a bundle analysis to identify heavy dependencies and optimize asset hashing for improved caching.

Set up Vite route splitting by implementing React.lazy for dynamic imports, wrapping routes in Suspense boundaries, and configuring manual chunks in vite.config.ts to separate vendor code and improve loading performance.

Vite HMR for React works through prebundling and fast refresh to provide instant component updates without losing state. This development workflow improves productivity by enabling rapid debugging and iteration cycles.

Manage Vite environment variables by defining modes and using VITE_ prefixed vars for client-side exposure. Keep secrets server-side only, as any VITE_ prefixed variables are bundled into the client code and publicly visible.

Vite handles images, fonts, and SVGs automatically through asset hashing and optimized bundling. Place static files in the public directory for direct serving, or import assets in components to get processed URLs and minified outputs.