Einführung: Leistung ist eine Funktion In einem Markt, in dem 53 % der mobilen Nutzer eine Seite verlassen, deren Ladezeit mehr als 3 Sekunden dauert (Quelle: Google/SOASTA), ist Leistung keine optionale Optimierung, sondern eine Produktanforderung. Für Angular-Anwendungen führt dies zu präzisen Architekturentscheidungen, integrierten Profilierungstools und intelligenten Rendering-Strategien. In diesem Leitfaden untersuchen wir die effektivsten Techniken zur Optimierung einer Angular-Anwendung – von der Kompilierung bis zur Bündelung, von der Änderungserkennung bis zum HTTP-Caching – anhand realer Codebeispiele und Benchmark-Metriken. Themen: #Angular #Performance #LazyLoading #ChangeDetection #WebDevelopment Abschnitt 1: AOT-Kompilierung und optimierte Ahead-of-Time (AOT) Build-Kompilierung Angular kompiliert HTML-Vorlagen bereits während der Build-Phase in JavaScript-Code, nicht zur Laufzeit im Browser. Seit Angular 9 ist die AOT-Kompilierung in der Produktion standardmäßig aktiviert und bringt drei messbare Vorteile: Kleineres Paket: Der Angular-Compiler ( @angular/compiler ) ist nicht im endgültigen Paket enthalten. Schnelleres Rendern: Der Browser erhält vorkompiliertes JavaScript. Frühzeitige Fehler: Probleme werden während des Builds entdeckt. # Production Build ng build --configuration Production Tree Shaking and Bundle Analysis // ❌ Full Import import * as _ from 'lodash'; // ✅ Spezifischer Import Import Chunk von 'lodash/chunk'; // ✅ Ohne Abhängigkeiten const result = [[1, 2], [3, 4]]; Abschnitt 2: Lazy Loading – Laden Sie nur das, was Sie brauchen // app.routes.ts import { Routes } from '@angular/router'; export const APP_ROUTES: Routes = [ { path: '', loadComponent: () => import('./features/home/home.component').then(c => c.HomeComponent), }, { path: 'admin', loadChildren: () => import('./features/admin/admin.routes').then(m => m.ADMIN_ROUTES), }, { path: 'blog', LoadChildren: () => import('./features/blog/blog.routes').then(m => m.
BLOG_ROUTES), }, { path: 'projects', loadComponent: () => import('./features/projects/projects.component').then(c => c.ProjectsComponent), }, ]; Vorladestrategie // app.config.ts import { ApplicationConfig } from '@angular/core'; import { ProvideRouter, withPreloading, PreloadAllModules } from '@angular/router'; importiere { APP_ROUTES } aus './app.routes'; export const appConfig: ApplicationConfig = { Provider: [ ProvideRouter(APP_ROUTES, withPreloading(PreloadAllModules)), ], }; Abschnitt 3: Änderungserkennung // OnPush-Strategie changeDetection: ChangeDetectionStrategy.OnPush; // ❌ Mutation this.post.title = 'Neuer Titel'; // ✅ Neuer Verweis this.post = { ...this.post, title: 'New Title' }; Signale importieren { signal, berechnet } aus '@angular/core'; const count = signal(0); const doubled = berechnet(() => count() * 2); Abschnitt 4: HTTP-Optimierung // Cache-Interceptor const Cache = new Map(); if (cache.has(req.url)) { return of(cache.get(req.url)); } Abschnitt 5: Bildoptimierung Abschnitt 6: Abhängigkeiten von Drittanbietern // ❌ Starker Bibliotheksimport moment from 'moment'; // ✅ Native Alternative new Intl.DateTimeFormat('it-IT').format(new Date()); Abschnitt 7: Leuchtturm der Profilierungstools https://tuo-sito.com Zusammenfassung ✅ Build-Produktion ✅ Lazy Loading ✅ OnPush ✅ HTTP-Cache Fazit Die Optimierung einer Angular-Anwendung ist ein kontinuierlicher Prozess, der Architektur, gute Entwicklungspraktiken und ständige Leistungsüberwachung kombiniert. Der erste Schritt ist immer das Messen: Tools wie Lighthouse und Angular DevTools helfen dabei, die tatsächlichen Engpässe zu identifizieren.