# Optimisations Supplémentaires - Plan d'Action

## 🎯 Objectif
Optimiser davantage le bundle et les performances avec des optimisations avancées.

## 📋 Optimisations à Appliquer

### 1. Preload Stratégique des Chunks Critiques

#### 1.1. Modifier `index.html` pour preload les vendors critiques
```html
<!-- Dans <head> de index.html -->
<!-- Preload des chunks vendors critiques -->
<link rel="preload" href="/js/vendor-react-[hash].js" as="script" crossorigin />
<link rel="preload" href="/js/vendor-router-[hash].js" as="script" crossorigin />
<link rel="preload" href="/js/vendor-tanstack-[hash].js" as="script" crossorigin />

<!-- Prefetch des chunks moins critiques -->
<link rel="prefetch" href="/js/vendor-icons-[hash].js" as="script" />
<link rel="prefetch" href="/js/vendor-dates-[hash].js" as="script" />
```

**Note**: Les hashs seront générés automatiquement par Vite lors du build.

#### 1.2. Utiliser `usePreload` hook existant
Le hook `usePreload` existe déjà dans `src/hooks/usePreload.ts`. L'utiliser pour preload dynamique des routes.

### 2. Vérifier les Dépendances Inutilisées

#### 2.1. Analyser avec depcheck
```bash
# Installer depcheck si nécessaire
npm install -g depcheck

# Analyser les dépendances inutilisées
depcheck --ignores="@types/*,eslint*,prettier*,@playwright/*,@testing-library/*,vitest,msw"
```

#### 2.2. Dépendances à vérifier manuellement
- `react-hot-toast`: Vérifier si utilisé (peut être remplacé par Toast custom)
- `immer`: Vérifier si utilisé activement
- `clsx`: Vérifier si utilisé (peut être remplacé par `tailwind-merge` uniquement)
- `@dnd-kit/*`: Vérifier si drag-and-drop est utilisé
- `hls.js`: Vérifier si streaming vidéo est utilisé activement

### 3. Optimiser les Assets (Images, Fonts)

#### 3.1. Images
- ✅ Utiliser `OptimizedImage` pour toutes les images
- ⏳ Compresser les images statiques avec un outil (imagemin, sharp)
- ⏳ Utiliser WebP/AVIF pour les images

#### 3.2. Fonts
- ⏳ Vérifier si toutes les fonts Google sont nécessaires
- ⏳ Utiliser `font-display: swap` pour les fonts
- ⏳ Précharger les fonts critiques uniquement

#### 3.3. Configuration Vite pour assets
```typescript
// Dans vite.config.ts
build: {
  assetsInlineLimit: 4096, // Inline les petits assets (< 4KB)
  // ...
}
```

### 4. Optimisations CSS

#### 4.1. Purge CSS
- ✅ Tailwind CSS purge déjà configuré
- ⏳ Vérifier que le purge fonctionne correctement

#### 4.2. CSS Code Splitting
- ✅ Déjà activé dans vite.config.ts (`cssCodeSplit: true`)

### 5. Service Worker / PWA

#### 5.1. Cache Strategy
- ⏳ Implémenter un service worker pour cache des assets statiques
- ⏳ Cache strategy pour les chunks vendors (cache-first)

## 🔧 Implémentation

### Phase 1 : Preload Stratégique (Priorité Haute)
1. ⏳ Modifier `index.html` pour preload les vendors critiques
2. ⏳ Utiliser `usePreload` pour preload dynamique des routes fréquentes

### Phase 2 : Analyse Dépendances (Priorité Moyenne)
1. ⏳ Installer et exécuter depcheck
2. ⏳ Analyser les résultats
3. ⏳ Supprimer les dépendances inutilisées

### Phase 3 : Optimisation Assets (Priorité Moyenne)
1. ⏳ Compresser les images statiques
2. ⏳ Optimiser les fonts (réduire le nombre, utiliser font-display)
3. ⏳ Configurer assetsInlineLimit dans Vite

## 📊 Métriques Cibles

- **Réduction dépendances**: 5-10% de dépendances en moins
- **Réduction assets**: 20-30% de taille en moins
- **Amélioration FCP**: 10-15% grâce au preload

## 🔍 Outils Recommandés

- **depcheck**: Analyse des dépendances inutilisées
- **bundlephobia**: Analyser la taille des dépendances
- **imagemin**: Compression d'images
- **webpack-bundle-analyzer**: Alternative à rollup-plugin-visualizer

