Vite Development

Expert guidance for using Vite 6+ as the build tool for React and other web applications with modern frontend development patterns. Documentation grounded in the official Vite docs at https://vite.dev/.

Skill Paths

Workspace skills: .github/skills/
Global skills: C:/Users/LOQ/.agents/skills/

Activation Conditions

Project Setup & Configuration:

Initializing new Vite projects
Configuring vite.config.js with plugins
Setting up development server with custom options
Configuring build optimization and bundling

Performance & Optimization:

Optimizing bundle size and code splitting
Configuring lazy loading and dynamic imports
Setting up asset optimization (images, CSS)
Enabling CSS code splitting and module resolution

Development Experience:

Configuring Hot Module Replacement (HMR)
Setting up proxy for API calls in dev
Environment variable handling
Source map configuration

Plugin Ecosystem:

Using official Vite plugins (React, Vue)
Community plugins for specific needs
Writing custom Vite plugins
Configuring plugin options and hooks

Part 1: Project Configuration

Basic Vite Config

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'api-client': ['./src/api/client'],
        },
      },
    },
  },
});

Environment-Specific Config

// vite.config.js
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    base: mode === 'production' ? '/app-base-path/' : '/',
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
  };
});

Part 2: Build Optimization

Code Splitting

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // React and ReactDOM
            if (id.includes('react') || id.includes('react-dom')) {
              return 'react-vendor';
            }
            // Other large libraries
            if (id.includes('axios')) {
              return 'api-lib';
            }
            return 'vendor';
          }
        },
      },
    },
  },
});

Lazy Loading Routes

// Lazy loading route components
const RecipeDetail = lazy(() => import('./pages/RecipeDetail'));
const RecipeList = lazy(() => import('./pages/RecipeList'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/recipes/:id" element={<RecipeDetail />} />
        <Route path="/recipes" element={<RecipeList />} />
      </Routes>
    </Suspense>
  );
}

Part 3: Development Server

Proxy Configuration

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      '/auth': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});

HMR Configuration

// vite.config.js
export default defineConfig({
  server: {
    hmr: {
      overlay: true,
    },
    watch: {
      usePolling: true,
      interval: 100,
    },
  },
});

Part 4: Assets and Plugins

Image Optimization

// vite.config.js
import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.65, 0.9], speed: 4 },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
            active: false,
          },
        ],
      },
    }),
  ],
});

Vite Development Best Practices

Configuration

Use defineConfig for type-safe configuration
Separate dev and production concerns
Enable sourcemaps for debugging
Configure proper base path for deployment
Set up proxy for API during development

Build Optimization

Implement code splitting for vendors
Use lazy loading for heavy routes/components
Configure manual chunks for better caching
Optimize assets (images, fonts)
Enable minification for production builds

Performance

Monitor bundle size with Vite bundle analyzer
Use tree-shaking to remove unused code
Configure dynamic imports for better time-to-interactive
Enable CSS code splitting for faster page loads
Use compression middleware for production

Development

Configure HMR for faster iteration
Set up environment variables for different environments
Use proxy for local API development
Enable source maps for better debugging
Configure clear port and open options

References & Resources

Documentation

Vite 2026 Config Reference — Comprehensive Vite configuration guide
Vite Official Excerpts - HMR Config — Hot Module Replacement configuration

Examples

Vite Config Examples — Example Vite configurations for different use cases

Scripts

Vite Plugin Template — Template for creating custom Vite plugins

Official Documentation

Related Skills

Skill	Relationship
react-development	React projects built with Vite
javascript-development	JS/TS code that Vite bundles
frontend-design	Design patterns for Vite-powered frontends

vite-development