---
name: ecc-vite-patterns
description: Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization.
---

# Vite Patterns

Vite build tool patterns and configuration.

## When to Activate
- Setting up a new Vite project
- Configuring Vite for React/Vue/Svelte
- Debugging build or HMR issues
- Optimizing build performance

## Basic Config
```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: { '/api': 'http://localhost:8080' }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})
```

## Environment Variables
```
VITE_API_URL=https://api.example.com
VITE_GA_ID=G-XXXXXXX
```
Access: `import.meta.env.VITE_API_URL`

## Proxy Setup
```typescript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
```

## Build Optimization
```typescript
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        ui: ['antd', '@ant-design/icons']
      }
    }
  },
  chunkSizeWarningLimit: 1000
}
```

## PWA / Icons / SVG
Install vite-plugin-pwa for service workers.
Use vite-plugin-svgr for SVG as React components.

## Library Mode
```typescript
build: {
  lib: {
    entry: 'src/index.ts',
    name: 'MyLib',
    formats: ['es', 'umd']
  }
}
```
