vite-react

vite.config.ts (Full Stack with TanStack Start)

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [
    tanstackStart(),
    cloudflare(),
    tailwindcss(),
    react(),
  ],
  resolve: {
    alias: {
      '@': new URL('./src', import.meta.url).pathname,
    },
  },
})

vite.config.ts (SPA with TanStack Router)

import { defineConfig } from 'vite'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [
    tanstackRouter({ autoCodeSplitting: true }),
    tailwindcss(),
    react(),
  ],
  resolve: {
    alias: {
      '@': new URL('./src', import.meta.url).pathname,
    },
  },
})

React Compiler

react({
  babel: {
    plugins: [['babel-plugin-react-compiler', {}]],
  },
})

Install: pnpm add -D babel-plugin-react-compiler. Auto-memoizes components and hooks - no manual useMemo/useCallback.

Path Aliases

Use import.meta.url for ESM-compatible resolution (no __dirname in ESM):

resolve: {
  alias: {
    '@': new URL('./src', import.meta.url).pathname,
  },
}

Mirror in tsconfig.json: "paths": { "@/*": ["./src/*"] }

Environment Variables

Files: .env, .env.local, .env.[mode], .env.[mode].local. Only VITE_-prefixed vars exposed to client. Built-in constants: import.meta.env.MODE, .DEV, .PROD, .SSR, .BASE_URL.

Type augmentation in src/vite-env.d.ts:

interface ImportMetaEnv {
  readonly VITE_API_URL: string
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

1. Plugin order - framework plugins first, then utilities, then react() last 2. Use rolldown-vite - drop-in replacement with 3-16x faster builds 3. Set staleTime in dev - avoid unnecessary refetches during HMR reloads 4. Warm up critical files - use server.warmup for frequently accessed modules 5. Split vendor chunks - separate react, @tanstack/* into stable chunks for caching 6. Never use transition-all - specific properties only for CSS transitions 7. Use import.meta.url for path resolution in ESM config files 8. Analyze bundles regularly - use rollup-plugin-visualizer before deploys 9. Keep VITE_ prefix discipline - only public values; secrets go in server functions 10. Set build.sourcemap for production - 'hidden' for error tracking without exposing source