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 pràctiques recomanades per millorar el temps de càrrega, la velocitat d'execució i la resposta de les nostres aplicacions.
Continguts
Introducció a l'optimització del rendiment
L'optimització del rendiment és crucial per garantir una experiència d'usuari fluida i ràpida. Una aplicació lenta pot frustrar els usuaris i fer-los abandonar el lloc web. A continuació, es presenten algunes de les tècniques més efectives per optimitzar el rendiment d'una aplicació Angular.
Estratègies de càrrega
Càrrega mandrosa (Lazy Loading)
La càrrega mandrosa és una tècnica que permet carregar només els mòduls necessaris quan es necessiten, en lloc de carregar tota l'aplicació al principi. Això redueix el temps de càrrega inicial i millora el rendiment.
// app-routing.module.ts
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];Precarregament de mòduls
El precarregament de mòduls carrega els mòduls mandrosos en segon pla després de la càrrega inicial de l'aplicació. Això assegura que els mòduls estiguin disponibles quan l'usuari els necessiti.
// app-routing.module.ts
import { PreloadAllModules } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule { }Optimització de la detecció de canvis
Angular utilitza la detecció de canvis per actualitzar la vista quan canvien les dades. Optimitzar aquest procés pot millorar significativament el rendiment.
Utilitzar OnPush Change Detection Strategy
La estratègia de detecció de canvis OnPush només actualitza la vista quan canvien les referències de les dades, en lloc de verificar tots els canvis.
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent { }Utilització de la memòria cau
Service Workers
Els Service Workers poden emmagatzemar en memòria cau els recursos de l'aplicació, permetent una càrrega més ràpida i una millor experiència d'usuari, fins i tot en mode offline.
Minificació i compressió
Minificació
La minificació redueix la mida dels fitxers JavaScript eliminant espais en blanc, comentaris i altres caràcters innecessaris.
Compressió
La compressió Gzip o Brotli pot reduir significativament la mida dels fitxers transferits al navegador.
// Configuració del servidor per a la compressió
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());Lazy Loading
La càrrega mandrosa (Lazy Loading) és una tècnica que permet carregar només els mòduls necessaris quan es necessiten, en lloc de carregar tota l'aplicació al principi. Això redueix el temps de càrrega inicial i millora el rendiment.
// app-routing.module.ts
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];Precarregament de mòduls
El precarregament de mòduls carrega els mòduls mandrosos en segon pla després de la càrrega inicial de l'aplicació. Això assegura que els mòduls estiguin disponibles quan l'usuari els necessiti.
// app-routing.module.ts
import { PreloadAllModules } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule { }Optimització de les imatges
Imatges responsives
Utilitzar imatges responsives permet carregar imatges de diferents resolucions segons la mida de la pantalla, reduint la quantitat de dades transferides.
<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="image-800w.jpg" alt="Descripció de la imatge">
Compressió d'imatges
Comprimir les imatges abans de pujar-les al servidor pot reduir significativament la seva mida.
Exercicis pràctics
- Implementar Lazy Loading: Modifica una aplicació Angular existent per utilitzar la càrrega mandrosa en alguns dels seus mòduls.
- Configurar Service Workers: Afegeix Service Workers a la teva aplicació Angular per millorar la memòria cau i permetre el mode offline.
- Utilitzar OnPush Change Detection: Canvia la detecció de canvis d'un component a
OnPushi observa com afecta el rendiment.
Conclusió
L'optimització del rendiment és essencial per garantir una experiència d'usuari fluida i ràpida. Mitjançant l'ús de tècniques com la càrrega mandrosa, la detecció de canvis OnPush, la memòria cau amb Service Workers, la minificació i compressió de fitxers, i l'optimització d'imatges, podem millorar significativament el rendiment de les nostres aplicacions Angular. Practicar aquestes tècniques i aplicar-les de manera consistent ens ajudarà a crear aplicacions més eficients i agradables per als usuaris.
Curs d'Angular
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- Arquitectura d'Angular
- Primera aplicació Angular
Mòdul 2: Components d'Angular
- Comprendre els components
- Crear components
- Plantilles de components
- Estils de components
- Interacció de components
Mòdul 3: Enllaç de dades i directives
- Interpolació i enllaç de propietats
- Enllaç d'esdeveniments
- Enllaç de dades bidireccional
- Directives integrades
- Directives personalitzades
Mòdul 4: Serveis i injecció de dependències
Mòdul 5: Enrutament i navegació
Mòdul 6: Formularis a Angular
Mòdul 7: Client HTTP i observables
- Introducció al client HTTP
- Fer sol·licituds HTTP
- Gestionar respostes HTTP
- Utilitzar observables
- Gestió d'errors
Mòdul 8: Gestió d'estat
- Introducció a la gestió d'estat
- Utilitzar serveis per a la gestió d'estat
- NgRx Store
- NgRx Effects
- NgRx Entity
Mòdul 9: Proves a Angular
- Proves unitàries
- Proves de components
- Proves de serveis
- Proves de cap a cap
- Simulació de dependències
Mòdul 10: Conceptes avançats d'Angular
- Angular Universal
- Optimització del rendiment
- Internacionalització (i18n)
- Tubs personalitzats
- Animacions d'Angular