Performance Frontend & Code Splitting : Accélérer les Applications React & Vite

import React, { Suspense, lazy } from 'react';

// Chargement à la demande des routes lourdes
const AnalyticsDashboard = lazy(() => import('./pages/AnalyticsDashboard'));
const SettingsPanel = lazy(() => import('./pages/SettingsPanel'));

export function AppRouter() {
  return (
    <Suspense fallback={<div className="animate-pulse p-6">Chargement du module...</div>}>
      <Routes>
        <Route path="/dashboard" element={<AnalyticsDashboard />} />
        <Route path="/settings" element={<SettingsPanel />} />
      </Routes>
    </Suspense>
  );
}

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['framer-motion', 'lucide-react'],
          charts: ['recharts'],
        },
      },
    },
  },
});