Vite

Was ist es?

Vite ist das Build-Tool von Evan You (Vue-Creator) — native ES-Module im Dev für Lightning-fast HMR, Rollup für Production-Builds. De-facto-Standard für SPAs außerhalb von Next.js / Remix.

Quickstart

pnpm create vite@latest my-app -- --template react-ts
cd my-app && pnpm install && pnpm dev

vite.config.ts ist minimal:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({ plugins: [react()] })

Typische Patterns

• Plugin-Ökosystem: @vitejs/plugin-react, vite-plugin-pwa, unplugin-icons.
• Env-Vars über VITE_*-Prefix: import.meta.env.VITE_API_URL.
• Glob-Imports:

  const modules = import.meta.glob('./pages/*.tsx', { eager: true })
  

• SSR-Mode für Custom-Frameworks (Astro, Nuxt, SvelteKit bauen darauf auf).
• Vitest als Companion-Test-Runner — teilt Vite-Config.

Gotchas / Was oft schiefgeht

• Dev nutzt ESM, Prod-Build nutzt Rollup → Verhalten kann divergieren. Immer Prod-Build vor Deploy testen.
• CommonJS-Deps brauchen optimizeDeps.include für Pre-Bundle, sonst HMR-Bugs.
• Asset-Pfade: /foo.png im public/-Dir vs import logo from './foo.png' — unterschiedliche Resolutions.
• HMR für Custom-Plugins: API hat Quirks, Docs sind dünn.
• base-Option für Sub-Path-Deploys oft vergessen → 404 auf Assets.

Wann nicht?

Wenn du SSR/SSG mit React brauchst → Next.js oder Remix (haben eigene Build-Layer). Sehr große Codebases mit komplexen Build-Pipelines → Turbopack / Webpack mit Custom-Loaders.