Analyse de bundle frontend, plan de réduction

---
name: analyse-bundle-frontend
description: "Analyse le bundle JavaScript d'une application front (Next.js, Vite, Webpack) pour identifier les dépendances lourdes, le code mort et les opportunités de code splitting. À utiliser quand un dev cherche à réduire le poids du JS livré au navigateur, améliorer le Largest Contentful Paint, ou diagnostiquer un build dont la taille explose après une dépendance ajoutée."
metadata:
  iaskills_title: "Analyse de bundle frontend, plan de réduction"
  metier_slug: dev
  metiers:
    - Développeur front
    - Lead front
  secteur: "Tech & DSI"
  tier: free
  compatible:
    - claude-code
    - cowork
    - cursor
    - codex
  version: "1.0.0"
  author: "iaskills"
  editorial:
    pitch: "Audit du bundle JS d'une app front en 20 minutes. Identifie les libs lourdes, le code mort et les chemins de code splitting pour passer sous la barre des 200 Ko gzippés sur la page critique."
    long_description: "Skill qui aide un développeur front à comprendre ce qui pèse dans son bundle livré au navigateur, et à dresser un plan de réduction priorisé. Couvre Next.js, Vite et Webpack via leurs analyzers respectifs (`@next/bundle-analyzer`, `rollup-plugin-visualizer`, `webpack-bundle-analyzer`). Le skill demande la stack, la commande de build, et la route ou page critique à optimiser. Il guide ensuite l'exécution de l'analyzer, lit la sortie, classe les modules par poids, détecte les patterns suspects (lodash importé en entier, moment.js avec toutes les locales, polyfills inutiles, dupliquats de version, dépendances dev embarquées en prod), puis propose 3 catégories d'actions : remplacer (alternative plus légère), splitter (lazy import, route-based), supprimer (code mort ou polyfill obsolète). Rend un tableau de findings priorisé par impact estimé et un plan d'attaque sur 2 sprints."
    bullets:
      - "Identifie les 10 modules les plus lourds du bundle"
      - "Détecte 12 patterns d'import suspects (lodash full, moment locales)"
      - "Propose alternatives plus légères ou tree-shakable"
      - "Plan de code splitting par route ou interaction utilisateur"
      - "Compatible Next.js, Vite, Webpack, Rollup"
      - "Tableau de findings priorisé par Ko économisés"
    exemple_avant: "Vous venez d'ajouter une lib de graphiques et le bundle de la page d'accueil est passé de 180 Ko à 410 Ko gzippés. Le Largest Contentful Paint sur mobile est passé à 4,2 s. Vous ne savez pas par où commencer, et `next build` sort juste un tableau de chunks sans expliquer ce qu'il y a dedans."
    exemple_apres: "En 20 minutes, vous avez la liste des 8 modules qui pèsent plus de 15 Ko, vous voyez que la lib de graphiques pèse 180 Ko à elle seule sur la home alors qu'elle ne sert qu'au dashboard. Plan : la lazy-load via `next/dynamic` (gain 180 Ko sur la home), remplacer `moment` par `date-fns` (gain 35 Ko), retirer un polyfill IE11 oublié (gain 12 Ko). Total visé : 227 Ko économisés sur la page critique."
    recommended_metiers:
      - dirigeant-pme
    secteurs:
      - tech-dsi
      - startup-vc
      - marketing-commerce
      - communication-rp
      - medias-publishing
    metiers_individuels:
      - dev-frontend
      - dev-backend
      - cto
      - architecte-si
      - product-manager
      - head-of-growth
---

# Analyse de bundle frontend, plan de réduction

## Quand utiliser ce skill

Déclencher quand un développeur ou tech lead front demande :

- "Pourquoi mon bundle Next a doublé après ce PR ?"
- "Comment je réduis le JS de ma home, mon LCP est à 4 s sur mobile"
- "Audit du bundle, on est à 600 Ko gzippés, c'est trop"
- "Lazy load cette page, elle est trop lourde"
- "Trouve-moi les libs lourdes que je peux remplacer"

Ne pas utiliser pour :

- Optimisation des images (skill séparé sur la perf média)
- Tuning serveur SSR / streaming (skill séparé)
- Migration framework (Next 14 vers 15, Vue 2 vers 3)
- Diagnostic d'un crash runtime (skill debug)