Gérer la taille des bundles

Les budgets dans Angular sont un outil puissant pour contrôler et optimiser la taille de votre application. Ils vous permettent de définir des limites de taille pour différentes parties de votre application et vous alertent lorsque ces limites sont dépassées.

Imaginez que vous prépariez une valise pour un voyage. La compagnie aérienne vous impose une limite de poids. De la même manière, Angular vous permet de définir des "limites de poids" pour votre application, garantissant ainsi qu'elle reste légère et performante.

Voici le type d'erreur que vous pourriez rencontrer :

✘ [ERROR] bundle initial exceeded maximum budget. Budget 1.05 MB was not met by 1.28 MB with a total of 2.33 MB.

Configuration détaillée des budgets

angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "bundle",
                  "name": "main",
                  "baseline": "1mb",
                  "maximumWarning": "1.5mb",
                  "maximumError": "2mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        }
      }
    }
  }
}

Propriété	Description
type	Type de budget
baseline	Taille de référence pour les comparaisons
maximumWarning	Seuil maximum pour les avertissements
maximumError	Seuil maximum pour les erreurs
minimumWarning	Seuil minimum pour les avertissements
minimumError	Seuil minimum pour les erreurs
warning	Seuil combiné pour les avertissements (min & max)
error	Seuil combiné pour les erreurs (min & max)

Types de budgets

Type	Description
initial	Taille du JavaScript initial nécessaire au démarrage
bundle	Taille d'un bundle spécifique (main, polyfills, etc.)
anyComponentStyle	Taille maximale des styles par composant
allScript	Taille totale de tous les scripts
all	Taille totale de l'application
anyScript	Taille maximale de chaque script individuel
any	Taille maximale de n'importe quel fichier

Optimisation de la taille de l'application

1. Optimisation des imports de bibliothèques

user.component.ts

// ❌ À éviter : Import global
import { MatButtonModule, MatCardModule, MatInputModule } from '@angular/material';

// ✅ Recommandé : Imports spécifiques
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';

user.service.ts

// ❌ À éviter : Import de toute la librairie rxjs
import * as rxjs from 'rxjs';

// ✅ Recommandé : Import spécifique des opérateurs
import { map, filter, tap } from 'rxjs/operators';

CONSEIL

Les imports spécifiques permettent au tree-shaking d'éliminer le code non utilisé lors de la compilation, réduisant ainsi la taille finale du bundle.

2. Lazy Loading et @defer

app.routes.ts

export const routes: Routes = [
  {
    path: 'users',
    // ✅ Chargement à la demande du module Users
    loadComponent: () => import('./components/features/user/user.component')
      .then(m => m.UserComponent)
  }
];

user-list.component.ts

@Component({
  selector: 'app-user-list',
  template: `
    <!-- ✅ Chargement différé du composant lourd -->
    @defer (on viewport) {
      <app-user-data-grid [users]="users" />
    } @loading {
      <app-loading-spinner />
    }
  `
})
export class UserListComponent {
  users: User[] = [];
}

ASTUCE PERFORMANCE

Le @defer permet de retarder le chargement des composants jusqu'à ce qu'ils soient nécessaires, réduisant ainsi le bundle initial. Vous pouvez déclencher le chargement sur différentes conditions :

• on viewport : quand l'élément entre dans la vue
• on idle : quand le navigateur est inactif
• on interaction : au clic ou hover
• when condition : sur une condition personnalisée

3. Compression Gzip/Brotli

Utiliser la compression Gzip/Brotli sur votre serveur

IMPORTANT

La compression peut réduire la taille des fichiers de 60-80%, mais assurez-vous que votre serveur est correctement configuré pour servir les fichiers compressés avec les bons en-têtes Content-Encoding.

Analyse de la taille des bundles

Pour visualiser en détail la taille de vos bundles, vous devez d'abord activer la génération du fichier stats.json :

angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "statsJson": true,
            // ... autres options
          }
        }
      }
    }
  }
}

CLI

Ou uiliser:

ng build --stats-json

Une fois le fichier stats.json généré dans votre dossier dist, vous avez plusieurs options pour analyser vos bundles :

1. esbuild-visualizer (recommandé pour Angular 17+) :

npm install -D esbuild-visualizer
npx esbuild-visualizer --metadata ./dist/your-app/stats.json

Ou mettez le fichier sur https://esbuild.github.io/analyze

2. webpack-bundle-analyzer (versions antérieures d'Angular) :

npm install -D webpack-bundle-analyzer
npx webpack-bundle-analyzer ./dist/your-app/stats.json