Vite

Statut

Document de cadrage frontend — v1.0 — relu le 2026-05-10.

Contexte

Vite est le bundler du backoffice DMV (dmv_backoffice), une application React en JSX (pas TypeScript — fichiers .jsx, pas de tsconfig.json).

L'application publique dmv-public utilise Next.js qui intègre son propre bundler (Webpack ou Turbopack selon la version), et ne dépend pas de Vite.

Version

Vite 7.2.4 avec le plugin @vitejs/plugin-react et l'intégration Tailwind CSS via @tailwindcss/vite.

Configuration backoffice

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'supabase-vendor': ['@supabase/supabase-js'],
        },
      },
    },
  },
})

Découpage des chunks

La configuration manualChunks divise le bundle en trois parties :

Chunk	Contenu	Rôle
react-vendor	react, react-dom, react-router-dom	Core React stable, mis en cache longtemps
supabase-vendor	@supabase/supabase-js	Client Supabase, mis en cache longtemps
chunk principal	Code applicatif	Mis à jour à chaque déploiement

Ce découpage réduit la taille du bundle principal et améliore les performances de chargement en production (meilleure utilisation du cache navigateur).

Tailwind CSS

L'intégration Tailwind 4 via le plugin @tailwindcss/vite remplace l'ancienne configuration PostCSS. Le plugin gère la génération CSS directement dans le pipeline Vite.

Avantages de Vite pour le backoffice

• Démarrage à froid quasi-instantané en développement (ESM natif).
• Hot Module Replacement (HMR) très rapide.
• Build de production optimisé via Rollup.
• Configuration simple pour une SPA React.

Différence avec dmv-public

Aspect	dmv_backoffice (Vite)	dmv-public (Next.js)
Type	SPA (client-side rendering)	SSR / SSG / hybrid
Bundler	Vite 7.2.4	Next.js interne
Routing	react-router-dom 7	Next.js App Router
Public	Non (admin authentifié)	Oui (accessible publiquement)
SEO	Non requis	Requis

Points à clarifier

• Stratégie de déploiement du build Vite (S3, Nginx, CDN).
• Variables d'environnement Vite (VITE_*) à documenter.
• Configuration pour d'autres apps potentielles utilisant Vite (PlayLoop, Mairie, AssoSuite).