Optimisation du Bundle

Ce que cela fait

Cette compétence documente des techniques concrètes pour réduire la taille du bundle client-side et maintenir les builds dans un budget de performance. Elle couvre une approche éprouvée de manifeste d'icônes pour éviter les imports d'icônes via wildcard, des stratégies de tree-shaking (imports nommés), des imports dynamiques pour les composants lourds, le découpage des routes/du code, l'application de limites de taille et l'intégration CI pour des vérifications automatisées. Le guide inclut des extraits de code, des hooks de build et un flux d'optimisation recommandé.

Quand l'utiliser

Utilisez cette compétence lors de l'audit ou de la réduction de la taille du bundle d'une application web — par exemple avant des déploiements en production, lors de l'ajout d'une dépendance volumineuse, ou lors de l'analyse de chunks anormalement grands. Elle sert également de checklist pour le gating CI et les revues avant fusion.

Ce qui est inclus

• Scripts : références à des scripts de temps de build (générateur de manifeste d'icônes, hooks de build) bien que le chemin découvert n'ait pas contenu de dossier de scripts explicite (has_scripts=false).
• Références : exemples pratiques, emplacements de configuration (next.config.ts, limites de taille package.json) et commandes d'analyse pour un usage local et CI.
• Instructions : flux de travail étape par étape incluant l'activation de l'analyseur de bundle, l'exécution des vérifications de taille, l'identification des chunks volumineux et l'application de correctifs (imports nommés, imports dynamiques, suppression des dépendances de dev, déduplication des packages).

Agents compatibles

Agents axés sur le front-end ou outils de développement capables d'inspecter le code et de suggérer des modifications (Claude Code, outils de style Copilot, automatisation CI locale).