Vite Build Tool Patterns

Quick Guide: Vite is the build tool for frontend apps. Keep path aliases in sync between vite.config.ts and tsconfig.json (or use resolve.tsconfigPaths in Vite 8). Use vendor chunk splitting (manualChunks in Vite 7, codeSplitting.groups in Vite 8). Use loadEnv() for environment-specific builds. Vite 8 uses Rolldown by default with build.rolldownOptions.

Current versions: Vite 8 (stable, March 2026) with Rolldown bundler. Vite 7 (June 2025) still widely deployed.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST keep path aliases in sync between vite.config.ts and tsconfig.json - mismatches cause import resolution failures)

(You MUST use build.rolldownOptions in Vite 8+ - build.rollupOptions is a deprecated alias)

(You MUST use codeSplitting.groups for chunk splitting in Vite 8 - object-form manualChunks is removed, function-form deprecated)