Vite + React: performances et bonnes pratiques

Vite est ultra‑rapide en dev, encore faut‑il produire un build léger. Voici nos réglages et patterns gagnants.

Configuration Vite

// vite.config.ts (extrait)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'es2020',
    sourcemap: false,
    cssCodeSplit: true,
    chunkSizeWarningLimit: 600,
    rollupOptions: {
      output: { manualChunks: { vendor: ['react','react-dom'] } }
    }
  }
})

Code splitting et lazy

• lazy() + Suspense pour routes lourdes

• Préchargement au hover des pages critiques

• Dépendances lourdes isolées dans des chunks dédiés

Images et polices

• Formats modernes (AVIF/WebP), tailles explicites

• Font‑display: swap + preload WOFF2

• SVG inline uniquement pour icônes simples

Réseau

• HTTP/2 + CDN

• Cache agressif pour assets immuables

• API: compression et pagination

Mesure continue

• Web Vitals en prod (LCP/INP/CLS)

• Bundle Analyzer sur chaque PR

• Traces d’interactions lentes (>200ms)

Résultat attendu

• -30 à -50% de JS expédié

• LCP < 2.5s, INP < 200ms

• DX inchangée (hot reload instantané)