React + Vite Best Practices Skill

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 (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

Environment Variables

// src/vite-env.d.ts
/// <reference types="vite/client" />

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

Agent Skills: React + Vite Best Practices

Install this agent skill to your local

Skill Files