Initial commit

skills/bundle-size-optimizer/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: optimizing-bundle-size
+description: Analyzes and reduces JavaScript bundle size for fast loading. Use when adding dependencies, before releases, or if bundle exceeds 200KB
+allowed-tools: Read, Grep, Glob, Bash
+---
+
+# Optimiseur de Taille de Bundle
+
+Optimise taille des bundles JavaScript pour chargement rapide et performance mobile.
+
+## Quand utiliser
+
+- Ajout de nouvelles dépendances
+- Bundle > 200 KB (gzipped)
+- Avant chaque release
+- Optimisation mobile (3G/4G)
+- Audit de performance
+
+## Cibles de taille
+
+- Bundle initial : < 100 KB (gzipped)
+- Bundle total : < 500 KB
+- Modules individuels : < 50 KB
+
+## Stratégies essentielles
+
+### Tree Shaking
+
+- Imports nommés (pas `import *`)
+- Imports spécifiques de modules externes
+- Named exports (pas d'export default d'objets)
+
+### Code Splitting
+
+- Import dynamique avec `import()`
+- Lazy loading de composants lourds
+- Vérifier lazy loading des modes de jeu
+
+### Minification & Compression
+
+- Minifier actif en production
+- Gzip/Brotli sur serveur (-70% taille)
+- Source maps pour debug
+
+### Éliminer duplications
+
+- Détecter code similaire entre modules
+- Extraire logique partagée
+- Cherche jeux arcade avec patterns similaires
+
+## Outils d'analyse
+
+**Scripts npm :**
+
+- `npm run analyze:dependencies` - Dépendances non utilisées
+- `npm run dead-code` - Exports/fonctions jamais appelés
+- `npm run analyze:globals` - Variables globales
+- `npm run analyze:assets` - Assets volumineux
+
+**Mesurer impact :**
+
+- Taille gzippée avant/après
+- Lighthouse CI (Performance > 90)
+- Tests mobile 3G/4G
+
+## Workflow
+
+1. **Analyser :** Lancer scripts npm d'analyse
+2. **Identifier :** Code mort, modules lourds, imports sous-optimaux
+3. **Optimiser :** Une stratégie à la fois (lazy loading > tree shaking > minification)
+4. **Mesurer :** Taille gzippée, temps chargement, Lighthouse
+5. **Valider :** Tests passent, mobile performant
+
+## Checklist
+
+- [ ] Scripts d'analyse exécutés
+- [ ] Imports optimisés (spécifiques, pas wildcard)
+- [ ] Code mort retiré
+- [ ] Lazy loading vérifié
+- [ ] Minification/Gzip activés
+- [ ] Lighthouse > 90 (Performance)
+- [ ] Bundle < 100 KB (gzipped)
+
+## En cas de doute
+
+**Règles absolues :**
+
+1. Toujours mesurer avant/après
+2. Une optimisation à la fois
+3. Priorité : lazy loading > tree shaking > minification
+4. Mobile 3G/4G = référence
+5. Tests passent après chaque changement
+
+**Workflow minimal :**
+
+```bash
+npm run analyze:dependencies    # Identifier code mort
+npm run dead-code              # Vérifier exports non utilisés
+npm run analyze:assets         # Vérifier assets volumineux
+```