# 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`