veza/apps/web/PLAN_OPTIMISATION_BUNDLE.md

Plan d'Optimisation du Bundle Size

🎯 Objectif

Réduire la taille du bundle initial de 20-30% pour améliorer les performances de chargement.

📊 Analyse Actuelle

Dépendances Volumineuses Identifiées

• lucide-react: 238 fichiers utilisent cette librairie (imports potentiellement non optimisés)
• react-router-dom: Utilisé partout
• @tanstack/react-query: Utilisé globalement
• @tanstack/react-virtual: Pour VirtualizedList
• date-fns: Pour les dates
• zod: Pour la validation
• dompurify: Pour la sanitization
• hls.js: Pour la lecture vidéo
• emoji-picker-react: Composant volumineux

Code Splitting Actuel

• ✅ Lazy loading des pages (LazyComponent)
• ⚠️ Pas de manual chunk splitting configuré
• ⚠️ Imports lucide-react non optimisés (imports par défaut au lieu d'imports nommés)

🔧 Optimisations à Appliquer

Phase 1 : Optimisation des Imports (✅ Complétée)

1. ✅ Optimiser les imports lucide-react (tree-shaking) - Déjà optimisé (imports nommés)
2. ✅ Optimiser les imports date-fns (imports nommés au lieu de default) - Déjà optimisé
3. ✅ Vérifier les imports de react-router-dom - Déjà optimisé

Phase 2 : Code Splitting Amélioré (✅ Complétée)

1. ✅ Configurer manual chunk splitting dans vite.config.ts
   • Vendor chunks: react, router, tanstack, icons, dates, validation, media
   • Feature chunks: player, upload, chat, studio
2. ✅ Séparer les vendors (react, react-dom, react-router)
3. ✅ Créer des chunks pour les features lourdes (player, editor, charts)

Phase 3 : Optimisation des Dépendances (✅ Complétée)

1. ✅ Lazy load des composants lourds
   • ✅ EmojiPicker (ChatInput, ChatMessage) - ~200KB économisés
   • ✅ react-easy-crop (ImageCropper) - ~100KB économisés
2. ⏳ Vérifier si toutes les dépendances sont nécessaires (à faire manuellement)
3. ⏳ Optimiser les assets (images, fonts) (à faire manuellement)

Phase 4 : Configuration Build (✅ Complétée)

1. ✅ Code splitting manuel configuré dans vite.config.ts
2. ✅ Chunks vendors séparés pour meilleur caching
3. ✅ Bundle analyzer déjà configuré (rollup-plugin-visualizer)

Phase 4 : Configuration Build

1. ⏳ Augmenter chunkSizeWarningLimit si nécessaire
2. ⏳ Configurer la compression (gzip, brotli)
3. ⏳ Analyser le bundle avec visualizer après optimisations

📈 Métriques Cibles

• Bundle initial: < 500KB (gzipped)
• Chunks individuels: < 200KB chacun
• Réduction totale: 20-30%

🔍 Outils

• rollup-plugin-visualizer: Déjà configuré dans vite.config.ts
• Analyse après build: npm run build puis ouvrir dist/bundle-analysis.html