react-vite-best-practices

Reduce React Vite bundle size by applying manualChunks for vendor splitting, implementing route and component lazy-loading, and enabling asset hashing. The skill audits vite.config.* files to produce concrete configuration edits and prioritized chunking recommendations.

Vite HMR causes full page reloads in React when Fast Refresh or optimizeDeps settings are misconfigured. The skill diagnoses HMR issues and recommends tuning dependency prebundling and warmup configurations to maintain component state and accelerate cold starts.

The best way to split vendor chunks in Vite is configuring manualChunks within vite.config.* to separate third-party dependencies from application code. The skill provides targeted vendor splitting strategies to shrink initial payloads and improve caching.

Yes, manualChunks can be used with existing Vite plugins by applying minimal safe edits to vite.config.*. The skill audits current configuration settings and produces a change list that integrates with existing project files without breaking plugin functionality.

Fix slow Vite cold starts by tuning optimizeDeps for dependency prebundling and configuring warmup settings for frequently used modules. The skill diagnoses dev-loop responsiveness issues and provides configuration changes with expected impact estimates.

Avoid code-splitting in Vite when chunks become too small, increasing request overhead without meaningful payload reduction. The skill provides bundle analysis and validation steps to measure the impact of lazy-loading and manualChunks recommendations.