Budgets Angular

Les budgets définissent des limites de taille sur la sortie du build. Angular avertit ou fait échouer le build si un bundle dépasse le seuil, empêchant ainsi la croissance accidentelle du bundle de passer inaperçue.

Configuration (angular.json)

"configurations": {
  "production": {
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "500kb",
        "maximumError": "1mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "4kb",
        "maximumError": "8kb"
      }
    ]
  }
}

Types de budgets

Type	Ce qu’il mesure
initial	JS + CSS chargés au démarrage (le plus important)
lazy	N’importe quel chunk lazy-loaded
allScript	Somme de tous les scripts JS
anyScript	N’importe quel fichier JS
any	N’importe quel fichier de sortie
anyComponentStyle	Les styles inline d’un seul composant

Avertissement vs Erreur

Niveau	Comportement
maximumWarning	Le build réussit, un avertissement est affiché
maximumError	Le build échoue — le pipeline CI est bloqué

Définissez maximumWarning de manière conservative pour détecter la dérive tôt. Utilisez maximumError comme limite absolue.

Analyser le contenu du bundle

Quand un budget est dépassé, trouvez le responsable :

# Étape 1 : générer le fichier de statistiques
ng build --stats-json

# Étape 2 : visualiser
npx webpack-bundle-analyzer dist/my-app/browser/stats.json

Causes fréquentes de bundles trop volumineux :

• Import d’une bibliothèque entière au lieu de fonctions spécifiques (import * as _ from 'lodash')
• Une grande dépendance tierce chargée en eager au lieu de lazy
• Dépendances dupliquées (différentes versions du même package)

Corrections rapides

// ❌ Importe toute la bibliothèque (~70 ko)
import * as _ from 'lodash';

// ✅ Tree-shakeable — seul ce que vous utilisez
import { debounce } from 'lodash-es';

// ❌ Eager — augmente le bundle initial
import { ChartModule } from 'chart.js';

// ✅ Lazy — chargé uniquement quand nécessaire
const { Chart } = await import('chart.js');

Budgets de départ recommandés

Type d’application	Avertissement initial	Erreur initial
Landing / marketing	150 ko	250 ko
Application standard	400 ko	800 ko
Dashboard riche	600 ko	1 Mo

Configurez les budgets à la création du projet — les mettre en place rétroactivement sur une grande application est douloureux.