vite-patterns

name	vite-patterns
description	Use only when configuring Vite builds: plugin setup, environment handling, SSR, code splitting, proxy configuration, and production optimization.

Vite Patterns

Adapted from ECC's vite-patterns skill (MIT).

Build tool and dev server patterns for Vite 8+ projects. Covers configuration, environment variables, proxy setup, library mode, dependency pre-bundling, and common production pitfalls.

When to Use

• Configuring vite.config.ts or vite.config.js
• Setting up environment variables or .env files
• Configuring dev server proxy for API backends
• Optimizing build output (chunks, minification, assets)
• Publishing libraries with build.lib
• Troubleshooting dependency pre-bundling or CJS/ESM interop
• Debugging HMR, dev server, or build errors
• Choosing or ordering Vite plugins

For full patterns, examples, and anti-patterns, see REFERENCE.md.

When to Use

• Configuring vite.config.ts or vite.config.js
• Setting up environment variables or .env files
• Configuring dev server proxy for API backends
• Optimizing build output (chunks, minification, assets)
• Publishing libraries with build.lib
• Troubleshooting dependency pre-bundling or CJS/ESM interop
• Debugging HMR, dev server, or build errors
• Choosing or ordering Vite plugins

How It Works

Dev mode serves source files as native ESM. Build mode uses Rolldown (v7+) or Rollup (v5–v6). Deps are pre-bundled via esbuild.

REFERENCE.md Contents

Section	Description
Config	Basic/conditional config, key options
Plugins	Essential plugin table, authoring custom
HMR API	import.meta.hot patterns
Env Vars	Loading order, client access
Security	VITE_ prefix limits, loadEnv trap, sourcemaps
Server Proxy	Proxy configuration, WebSocket
Build Optimization	manualChunks, library mode
Performance	Barrel files, warmup, profiling
SSR & Deps	SSR config, pre-bundling
Pitfalls	Dev/build mismatch, Docker, monorepo
Anti-Patterns	Code + process anti-patterns
Quick Reference	Pattern table