Optimización del rendimiento angular en la práctica

Optimización del rendimiento angular en la práctica

Angular es un marco front-end muy potente, pero si no presta atención a la optimización del rendimiento, la aplicación puede volverse muy lenta y aumentar el tiempo de carga.
Aquí hay algunas sugerencias prácticas de la experiencia de optimización del rendimiento de Angular:

1. Utilice la estrategia de detección de cambios OnPush

De forma predeterminada, Angular verifica todos los cambios de datos que ocurren en la aplicación, lo que resulta en un rendimiento deficiente. Para resolver este problema, se puede utilizar la estrategia de detección de cambios OnPush, que solo iniciará la detección de cambios cuando el valor del enlace de entrada haya cambiado. Esta estrategia solo se aplica a componentes con propiedades @Input() y debe configurarse manualmente.

import {
    
    Component, ChangeDetectionStrategy} from '@angular/core';

@Component({
    
    
    selector: 'app-sample-component',
    templateUrl: './sample.component.html',
    styleUrls: ['./sample.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class SampleComponent {
    
    
    // ...
}

Defina un componente y configure changeDetectionlas opciones en OnPush, como se indicó anteriormente.

2. Usa tuberías ligeras

Las canalizaciones en Angular se pueden usar para transformar datos y mostrar diferentes resultados en plantillas. El uso de tuberías ligeras puede mejorar el rendimiento de las aplicaciones de Angular.

Un ejemplo clásico es formatear una fecha en una forma de cadena específica. Podemos usar la canalización DatePipe integrada para lograr esto, pero puede causar problemas de rendimiento. En su lugar, podemos escribir una canalización ligera personalizada para realizar la misma tarea:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe implements PipeTransform {
  transform(value: any): string {
    const date = new Date(value);
    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
  }
}

Utilice esta canalización personalizada en su plantilla:

<p>{
   
   { myDate | customDate }}</p>

El uso de canalizaciones para transformar datos en Angular es conveniente, pero tenga en cuenta que algunas canalizaciones pueden afectar negativamente el rendimiento. Se recomienda utilizar tuberías ligeras siguiendo las siguientes reglas:

• Use canalizaciones puras tanto como sea posible: las canalizaciones puras se refieren a canalizaciones cuya salida nunca cambia cuando la entrada no cambia. Solo se calculan cuando cambia la entrada, y las expresiones enlazadas en la plantilla no se ejecutarán varias veces.
• Evite canalizaciones complejas: las canalizaciones complejas requieren más recursos informáticos, por lo que deben evitarse tanto como sea posible. Cuando deba usar canalizaciones complejas, debe almacenar en caché sus resultados para que puedan reutilizarse cuando sea necesario.

import {
    
    Pipe, PipeTransform} from '@angular/core';

@Pipe({
    
    name: 'uppercase'})
export class UpperCasePipe implements PipeTransform {
    
    
    transform(value: string): string {
    
    
        return value.toUpperCase();
    }
}

La ventaja de esto es que esta canalización personalizada no tiene demasiadas operaciones o cálculos adicionales, por lo que es un poco más rápido que el DatePipe integrado, lo que mejora el rendimiento general de la aplicación.

3. Usa módulos de carga lenta

En Angular, los módulos de carga lenta pueden ayudarlo a dividir su aplicación y mejorar los tiempos de carga. Use módulos perezosos para diferir la carga de algún código hasta que el usuario lo necesite.

Para hacer que un módulo sea perezoso, debe usar el loadChildrenen lugar componentdel atributo en sus rutas.

const routes: Routes = [
  {
    
    
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

4. Use trackBy para ayudar a ngFor a optimizar

Al representar una matriz o lista con un bucle ngFor, un mecanismo de "verificación sucia" activa una nueva representación de todos los elementos de la lista si los datos cambian.

Al usar trackByla función, puede decirle a Angular cómo realizar un seguimiento de los cambios en los elementos de la lista, evitando así una representación innecesaria.

<ul>
  <li *ngFor="let item of items; trackBy: itemTrackByFn">{
   
   { item }}</li>
</ul>

itemTrackByFn(index, item) {
    
    
  return item.id;
}

5. Evite cambiar las propiedades de los objetos en los tipos de referencia

En las aplicaciones Angular, los datos se pueden compartir fácilmente pasando tipos de referencia entre componentes y servicios.

Sin embargo, si intenta modificar una propiedad de un objeto que ya está en uso en otro lugar, todas las referencias a ese objeto se verán afectadas, lo que puede generar detecciones de cambios innecesarias.

Para evitar esto, intente evitar modificar las propiedades de los objetos directamente y, en su lugar, use el operador Object.assign()o spreadpara crear nuevos objetos.

const user = {
    
     id: 1, name: 'John Doe', email: '[email protected]' };

// 不好的写法
this.userService.updateUser(user.id, user.name);
user.email = '[email protected]';

// 好的写法
this.userService.updateUser(user.id, user.name, {
    
     email: '[email protected]' });

6. Usa el desplazamiento virtual

Cuando necesita procesar una gran cantidad de datos, el desplazamiento virtual puede ayudarlo a lograr una experiencia de desplazamiento rápida y fluida sin renderizar la lista completa.

Angular CDK proporciona una CdkVirtualScrollViewportdirectiva llamada que puede ayudarlo a implementar el desplazamiento virtual.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{
   
   {item}}</div>
</cdk-virtual-scroll-viewport>

Las anteriores son algunas prácticas de optimización del rendimiento de Angular, algunas de estas técnicas se pueden aplicar individualmente y el uso de todas las técnicas al mismo tiempo puede ayudarlo a maximizar el rendimiento de las aplicaciones de Angular y mejorar la experiencia del usuario.

7. Habilite la compilación AOT

Activar la compilación AOT puede mejorar en gran medida el rendimiento de su aplicación. La compilación AOT compilará componentes/directivas y plantillas durante el tiempo de compilación e inyectará el código JavaScript resultante directamente en las plantillas HTML. Esto significa que en tiempo de ejecución, el navegador ya no necesita compilar plantillas, lo que reduce los tiempos de inicio y carga.

Específicamente, aquí se explica cómo habilitar la compilación AOT:

• --aotCree su aplicación usando la opción en Angular CLI :ng build --aot
• Configure el compilador JIT en su aplicación Angular para compilar componentes con anticipación como lo hace AOT:

@NgModule({
  // ...
  providers: [
    {
      provide: COMPILER_OPTIONS,
      useValue: {
        providers: [{useClass: JitCompiler}]
      },
      multi: true
    }
  ],
  // ...
})
export class AppModule {}

Las anteriores son algunas prácticas de optimización del rendimiento de Angular. Algunas de estas técnicas se pueden aplicar individualmente o al mismo tiempo. Puede ayudarlo a maximizar el rendimiento de las aplicaciones de Angular y mejorar la experiencia del usuario.