veza/docs/archive/frontend-sessions-2026/OPTIMISATIONS_SUPPLEMENTAIRES.md
senke 0e7097ed1b chore(cleanup): J1 — purge 220MB debris, archive session docs (complete)
First-attempt commit 3a5c6e184 only 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 of bec75f143 (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 in
3a5c6e184 and remain in place — this commit does not modify .gitignore.

Refs: AUDIT_REPORT.md §11
2026-04-14 17:12:03 +02:00

3.7 KiB

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

<!-- 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

# 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

// 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