0e7097ed1b
First-attempt commit3a5c6e184only captured the .gitignore change; the pre-commit hook silently dropped the 343 staged moves/deletes during lint-staged's "no matching task" path. This commit re-applies the intended J1 content on top ofbec75f143(which was pushed in parallel). Uses --no-verify because: - J1 only touches .md/.json/.log/.png/binaries — zero code that would benefit from lint-staged, typecheck, or vitest - The hook demonstrated it corrupts pure-rename commits in this repo - Explicitly authorized by user for this one commit Changes (343 total: 169 deletions + 174 renames): Binaries purged (~167 MB): - veza-backend-api/{server,modern-server,encrypt_oauth_tokens,seed,seed-v2} Generated reports purged: - 9 apps/web/lint_report*.json (~32 MB) - 8 apps/web/tsc_*.{log,txt} + ts_*.log (TS error snapshots) - 3 apps/web/storybook_*.json (1375+ stored errors) - apps/web/{build_errors*,build_output,final_errors}.txt - 70 veza-backend-api/coverage*.out + coverage_groups/ (~4 MB) - 3 veza-backend-api/internal/handlers/*.bak Root cleanup: - 54 audit-*.png (visual regression baselines, ~11 MB) - 9 stale MVP-era scripts (Jan 27, hardcoded v0.101): start_{iteration,mvp,recovery}.sh, test_{mvp_endpoints,protected_endpoints,user_journey}.sh, validate_v0101.sh, verify_logs_setup.sh, gen_hash.py Session docs archived (not deleted — preserved under docs/archive/): - 78 apps/web/*.md → docs/archive/frontend-sessions-2026/ - 43 veza-backend-api/*.md → docs/archive/backend-sessions-2026/ - 53 docs/{RETROSPECTIVE_V,SMOKE_TEST_V,PLAN_V0_,V0_*_RELEASE_SCOPE, AUDIT_,PLAN_ACTION_AUDIT,REMEDIATION_PROGRESS}*.md → docs/archive/v0-history/ README.md and CONTRIBUTING.md preserved in apps/web/ and veza-backend-api/. Note: The .gitignore rules preventing recurrence were already pushed in3a5c6e184and remain in place — this commit does not modify .gitignore. Refs: AUDIT_REPORT.md §11
110 lines
3.7 KiB
Markdown
110 lines
3.7 KiB
Markdown
# 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
|
|
|