Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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

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
typeType de budget
baselineTaille de référence pour les comparaisons
maximumWarningSeuil maximum pour les avertissements
maximumErrorSeuil maximum pour les erreurs
minimumWarningSeuil minimum pour les avertissements
minimumErrorSeuil minimum pour les erreurs
warningSeuil combiné pour les avertissements (min & max)
errorSeuil combiné pour les erreurs (min & max)

Types de budgets

TypeDescription
initialTaille du JavaScript initial nécessaire au démarrage
bundleTaille d'un bundle spécifique (main, polyfills, etc.)
anyComponentStyleTaille maximale des styles par composant
allScriptTaille totale de tous les scripts
allTaille totale de l'application
anyScriptTaille maximale de chaque script individuel
anyTaille maximale de n'importe quel fichier

Optimisation de la taille de l'application

1. Optimisation des imports de bibliothèques

typescript
// ❌ À é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';
typescript
// ❌ À é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

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

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

CLI

Ou uiliser:

bash
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+) :
bash
npm install -D esbuild-visualizer
npx esbuild-visualizer --metadata ./dist/your-app/stats.json

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

  1. webpack-bundle-analyzer (versions antérieures d'Angular) :
bash
npm install -D webpack-bundle-analyzer
npx webpack-bundle-analyzer ./dist/your-app/stats.json

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !