react-vite-best-practices

React + Vite Best Practices

Comprehensive performance optimization guide for React applications built with Vite. Contains 40+ rules across 8 categories, prioritized by impact to guide code generation and refactoring.

When to Apply

Reference these guidelines when:

Configuring Vite for React projects Implementing code splitting and lazy loading Optimizing build output and bundle size Setting up development environment Reviewing code for performance issues Rule Categories by Priority Priority Category Impact Prefix 1 Build Optimization CRITICAL build- 2 Code Splitting CRITICAL split- 3 Development Performance HIGH dev- 4 Asset Handling HIGH asset- 5 Environment Config MEDIUM env- 6 HMR Optimization MEDIUM hmr- 7 Bundle Analysis LOW-MEDIUM bundle- 8 Advanced Patterns LOW advanced- Quick Reference 1. Build Optimization (CRITICAL) build-manual-chunks - Configure manual chunks for vendor separation build-minify-terser - Use Terser for production minification build-target-modern - Target modern browsers for smaller bundles build-sourcemap-production - Configure sourcemaps appropriately build-output-structure - Organize output directory structure build-chunk-size-limit - Set appropriate chunk size warnings 2. Code Splitting (CRITICAL) split-route-lazy - Use React.lazy() for route-based splitting split-suspense-boundaries - Wrap lazy components with Suspense split-dynamic-imports - Use dynamic imports for heavy components split-preload-critical - Preload critical chunks on interaction split-named-chunks - Use named chunks for better caching split-vendor-separation - Separate vendor from application code 3. Development Performance (HIGH) dev-dependency-prebundling - Configure dependency pre-bundling dev-exclude-large-deps - Exclude large deps from optimization dev-warmup-frequent - Warmup frequently used modules dev-server-config - Optimize dev server configuration dev-hmr-overlay - Configure HMR error overlay 4. Asset Handling (HIGH) asset-inline-limit - Set appropriate asset inline limit asset-public-dir - Configure public directory correctly asset-import-syntax - Use correct asset import syntax asset-svg-components - Handle SVGs as React components asset-image-optimization - Optimize image loading asset-font-loading - Optimize font loading strategy 5. Environment Configuration (MEDIUM) env-vite-prefix - Use VITE_ prefix for client variables env-type-definitions - Type environment variables env-mode-specific - Use mode-specific env files env-sensitive-data - Never expose sensitive data env-build-time - Understand build-time replacement 6. HMR Optimization (MEDIUM) hmr-fast-refresh - Ensure Fast Refresh works correctly hmr-preserve-state - Preserve component state during HMR hmr-boundary-setup - Set up proper HMR boundaries hmr-custom-handlers - Implement custom HMR handlers 7. Bundle Analysis (LOW-MEDIUM) bundle-visualizer - Use rollup-plugin-visualizer bundle-analyze-deps - Analyze dependency sizes bundle-tree-shaking - Ensure proper tree shaking bundle-dead-code - Eliminate dead code bundle-css-splitting - Configure CSS code splitting 8. Advanced Patterns (LOW) advanced-ssr-config - Configure for SSR if needed advanced-library-mode - Build as library advanced-multi-page - Multi-page application setup advanced-worker-threads - Web Worker integration advanced-wasm - WebAssembly integration Essential Configurations Recommended vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path'

export default defineConfig({ plugins: [react()],

resolve: { alias: { '@': path.resolve(__dirname, './src'), }, },

build: { target: 'esnext', minify: 'terser', sourcemap: false, chunkSizeWarningLimit: 500, rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], router: ['react-router-dom'], }, }, }, terserOptions: { compress: { drop_console: true, drop_debugger: true, }, }, },

optimizeDeps: { include: ['react', 'react-dom'], },

server: { port: 3000, open: true, hmr: { overlay: true, }, }, })

Route-Based Code Splitting import { lazy, Suspense } from 'react' import { BrowserRouter, Routes, Route } from 'react-router-dom'

// Lazy load route components const Home = lazy(() => import('./pages/Home')) const Dashboard = lazy(() => import('./pages/Dashboard')) const Settings = lazy(() => import('./pages/Settings'))

// Named chunks for better debugging const Profile = lazy(() => import(/ webpackChunkName: "profile" / './pages/Profile') )

function App() { return ( }> } /> } /> } /> } /> ) }

Environment Variables // src/vite-env.d.ts ///

interface ImportMetaEnv { readonly VITE_API_URL: string readonly VITE_APP_TITLE: string readonly VITE_ENABLE_ANALYTICS: string }

interface ImportMeta { readonly env: ImportMetaEnv }

// Usage const apiUrl = import.meta.env.VITE_API_URL const isDev = import.meta.env.DEV const isProd = import.meta.env.PROD

How to Use

Read individual rule files for detailed explanations and code examples:

rules/build-manual-chunks.md rules/split-route-lazy.md rules/_sections.md

Each rule file contains:

Brief explanation of why it matters Incorrect code example with explanation Correct code example with explanation Additional context and references