@bundle-analyzerRéduit la taille de ton bundle JS gzippé
Maifady est un plugin Claude Code 100% gratuit avec 30 agents IA — @bundle-analyzer analyse ton bundle (Webpack, Vite, esbuild, Next.js, Remix), identifie les plus gros contributeurs en taille gzippée, et propose des réductions concrètes ordonnées par ROI : remplacement de libs lourdes, code-splitting, dynamic imports, tree-shaking.
Le problème qu'il résout
Ton site charge en 4 secondes sur 4G. Lighthouse te crie dessus. Tu suspectes le bundle JS, mais tu ne sais pas quelle lib est coupable, ni quelle est la réduction prioritaire. Tu pourrais lire un article par lib, mais tu n'as pas 6 heures.
@bundle-analyzer identifie les 5 plus gros contributeurs et te dit en 1 minute par ROI quoi faire en premier.
Comment il bosse
- Détecte ton bundler (Webpack, Vite, Rollup, esbuild, Parcel, Next.js, Remix).
- Suggère le bon analyzer (
webpack-bundle-analyzer,rollup-plugin-visualizer,@next/bundle-analyzer). - Identifie le top 5 contributeurs en gzippé.
- Propose des réductions ordonnées par ROI (gain en KB / effort en minutes).
- Catalogue : remplacer libs lourdes (moment→dayjs, lodash→lodash-es ou per-fn), tree-shake, dynamic import, lazy load, polyfills scopés.
Exemple concret
Tu tapes
›@bundle-analyzer analyse mon bundle Next.js. Identifie les 5 plus gros gzippés + propose des réductions concrètes.
Tu obtiens
## Bundle gzippé total : 487 KB
## Largest contributors
| Module | Gzipped | % | Note |
|--------------|---------|-----|----------------------------|
| moment | 71 KB | 14% | → dayjs (-60 KB) |
| react-dom | 42 KB | 9% | inévitable |
| lodash | 38 KB | 8% | tree-shake (-25 KB) |
| react-icons | 34 KB | 7% | per-icon import (-30 KB) |
| chart.js | 28 KB | 6% | lazy load (-28 KB hors /) |
## Recommendations (ordered by ROI)
1. moment → dayjs : -60 KB (15 min de boulot)
2. react-icons named imports : -30 KB (10 min)
3. chart.js lazy load : -28 KB sur 80% des routes (20 min)
4. lodash tree-shake : -25 KB (5 min)
## Expected total saving : -143 KB (-29%)
Pourquoi tu vas l'aimer
Mesure gzippée
Pas du raw. C'est ce que ton user télécharge réellement.
ROI ordonné
Pas une liste à plat. Le premier item te fait gagner le plus, le plus vite.
Fixes connus
moment → dayjs, react-icons per-icon, lodash tree-shake. Patterns établis avec impact mesurable.
Compatibilité checked
Il ne te dit pas "moment → dayjs" si tu utilises moment.tz. Il vérifie d'abord.
Quand l'utiliser
✅ Idéal pour
- Site lent au premier chargement (LCP > 2.5s)
- Lighthouse score < 90
- Cible 4G / appareils faibles
- Avant un launch marketing
⚠️ Pas adapté quand
- Le problème est runtime (rendering lent) → @perf-profiler
- Backend lent → @sql-optimizer
- Bundle déjà bien optimisé (sub-200KB) — diminishing returns
Combine avec ces agents
Questions fréquentes
Et brotli vs gzip ?
Brotli ~15% mieux que gzip. Si ton serveur sert brotli (Cloudflare le fait par défaut), mesure brotli. L'agent peut estimer les deux.
Lazy load casse-t-il l'UX ?
Pas si bien fait : skeleton loader pendant le fetch de la route. L'agent te le rappelle. Pour les routes critiques (homepage), on ne lazy load pas.