En aquest tema, aprendrem com optimitzar el rendiment de les aplicacions Angular per assegurar-nos que siguin ràpides i eficients. Explorarem diverses tècniques i eines que ens ajudaran a millorar el temps de càrrega, la velocitat de resposta i l'experiència general de l'usuari.
Continguts
Introducció a l'optimització del rendiment
L'optimització del rendiment és crucial per garantir que les aplicacions Angular siguin ràpides i responsives. Alguns dels beneficis inclouen:
- Millor experiència d'usuari.
- Menor temps de càrrega.
- Menor consum de recursos.
- Millor posicionament en motors de cerca (SEO).
Lazy Loading de mòduls
El Lazy Loading permet carregar mòduls només quan són necessaris, reduint el temps de càrrega inicial de l'aplicació.
Exemple
// app-routing.module.ts
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];Explicació
loadChildren: Aquesta propietat indica que el mòdulFeatureModulees carregarà només quan l'usuari accedeixi a la ruta/feature.
Change Detection Strategy
Angular utilitza el mecanisme de Change Detection per actualitzar la vista quan el model canvia. Podem optimitzar aquest procés utilitzant estratègies de Change Detection.
Estratègies
- Default: Angular verifica tots els components.
- OnPush: Angular verifica només els components amb inputs canviats o esdeveniments.
OnPush Change Detection
L'estratègia OnPush pot millorar significativament el rendiment en aplicacions grans.
Exemple
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
@Input() data: any;
}Explicació
ChangeDetectionStrategy.OnPush: Angular només verificarà aquest component si els inputs canvien o es produeix un esdeveniment.
AOT Compilation
L'AOT (Ahead-of-Time) Compilation compila l'aplicació durant el build, millorant el temps de càrrega i la seguretat.
Com habilitar AOT
Explicació
--prod: Aquest flag habilita l'AOT Compilation i altres optimitzacions per a la producció.
Optimització de les dependències
Reduir la mida del bundle eliminant dependències innecessàries i utilitzant imports específics.
Exemple
Explicació
- Importar només les funcions necessàries redueix la mida del bundle.
Utilització de Web Workers
Els Web Workers permeten executar tasques en segon pla, millorant la resposta de la UI.
Exemple
// app.component.ts
if (typeof Worker !== 'undefined') {
const worker = new Worker('./app.worker', { type: 'module' });
worker.onmessage = ({ data }) => {
console.log(`Page got message: ${data}`);
};
worker.postMessage('hello');
}Explicació
- Els Web Workers permeten executar codi en un fil separat, evitant bloquejar la UI.
Optimització de les imatges
Les imatges poden ser una de les parts més pesades d'una aplicació. Optimitzar-les pot reduir significativament el temps de càrrega.
Consells
- Utilitzar formats d'imatge moderns com WebP.
- Comprimir les imatges.
- Utilitzar imatges responsives.
Exercicis pràctics
- Lazy Loading: Implementa Lazy Loading en una aplicació Angular existent.
- OnPush Change Detection: Canvia l'estratègia de Change Detection d'un component a
OnPushi observa els canvis en el rendiment. - AOT Compilation: Compila una aplicació Angular utilitzant AOT i mesura el temps de càrrega.
Conclusió
L'optimització del rendiment és essencial per a qualsevol aplicació Angular. Mitjançant tècniques com el Lazy Loading, l'estratègia OnPush, l'AOT Compilation i l'optimització de les dependències i imatges, podem assegurar-nos que les nostres aplicacions siguin ràpides i eficients. Practica aquestes tècniques per millorar el rendiment de les teves aplicacions Angular.
Curs d'Angular 2+
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
Mòdul 3: Components i plantilles
Mòdul 4: Directives i pipes
Mòdul 5: Serveis i injecció de dependències
Mòdul 6: Enrutament i navegació
Mòdul 7: Formularis en Angular
Mòdul 8: Client HTTP i observables
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables