Оптимизация производительности Angular на практике

Оптимизация производительности Angular на практике

Angular — очень мощный интерфейсный фреймворк, но если вы не уделяете внимание оптимизации производительности, приложение может работать очень медленно и увеличивать время загрузки.
Вот несколько практических советов из опыта оптимизации производительности Angular:

1. Используйте стратегию обнаружения изменений OnPush

По умолчанию Angular проверяет все изменения данных, происходящие в приложении, что приводит к снижению производительности. Чтобы решить эту проблему, можно использовать стратегию обнаружения изменений OnPush, которая инициирует обнаружение изменений только при изменении значения входной привязки. Эта стратегия применяется только к компонентам со свойствами @Input() и должна быть установлена ​​вручную.

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 {
    
    
    // ...
}

Определите компонент и установите changeDetectionдля параметров значение OnPush, как указано выше.

2. Используйте легкие трубы

Конвейеры в Angular можно использовать для преобразования данных и отображения различных выходных данных в шаблонах. Использование облегченных каналов может повысить производительность приложений Angular.

Классический пример — форматирование даты в виде определенной строки. Для этого мы можем использовать встроенный конвейер DatePipe, но это может привести к проблемам с производительностью. Вместо этого мы можем написать собственный облегченный конвейер для выполнения той же задачи:

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()}`;
  }
}

Используйте этот пользовательский конвейер в своем шаблоне:

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

Использование каналов для преобразования данных в Angular удобно, но имейте в виду, что некоторые каналы могут негативно повлиять на производительность. Рекомендуется использовать облегченные трубы, соблюдая следующие правила:

• Максимально используйте чистые конвейеры: Чистые конвейеры относятся к конвейерам, выходные данные которых никогда не меняются, когда входные данные остаются неизменными.Они вычисляются только при изменении входных данных, а выражения, привязанные к шаблону, не будут выполняться несколько раз.
• Избегайте сложных конвейеров. Сложные конвейеры требуют больше вычислительных ресурсов, поэтому их следует избегать, насколько это возможно. Когда вам необходимо использовать сложные конвейеры, вы должны кэшировать их результаты, чтобы их можно было повторно использовать при необходимости.

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

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

Преимущество этого в том, что в этом пользовательском конвейере не слишком много дополнительных операций или вычислений, поэтому он немного быстрее, чем встроенный DatePipe, тем самым повышая производительность всего приложения.

3. Используйте ленивую загрузку модулей

В Angular модули отложенной загрузки могут помочь вам разделить ваше приложение и сократить время загрузки. Используйте ленивые модули, чтобы отложить загрузку некоторого кода до тех пор, пока он не понадобится пользователю.

Чтобы сделать модуль ленивым, вам нужно использовать атрибут loadChildrenвместо componentатрибута в ваших маршрутах.

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

4. Используйте trackBy, чтобы помочь ngFor оптимизировать

При рендеринге массива или списка с помощью цикла ngFor механизм «грязной проверки» запускает повторный рендеринг всех элементов списка, если данные изменяются.

Используя trackByэту функцию, вы можете указать Angular, как отслеживать изменения в элементах списка, избегая ненужного рендеринга.

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

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

5. Избегайте изменения свойств объекта в ссылочных типах

В приложениях Angular можно легко обмениваться данными, передавая ссылочные типы между компонентами и службами.

Однако если вы попытаетесь изменить свойство объекта, который уже используется в другом месте, это повлияет на все ссылки на этот объект, что может привести к ненужному обнаружению изменений.

Чтобы избежать этого, старайтесь избегать прямого изменения свойств объектов и вместо этого используйте оператор Object.assign()или spreadдля создания новых объектов.

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. Используйте виртуальную прокрутку

Когда вам нужно обработать большой объем данных, виртуальная прокрутка может помочь вам добиться быстрой и плавной прокрутки без рендеринга всего списка.

Angular CDK предоставляет CdkVirtualScrollViewportдирективу, которая может помочь вам реализовать виртуальную прокрутку.

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

Выше приведены некоторые практические методы оптимизации производительности Angular, некоторые из этих методов можно применять по отдельности, а одновременное использование всех методов может помочь вам максимизировать производительность приложений Angular и улучшить взаимодействие с пользователем.

7. Включите компиляцию AOT

Включение компиляции AOT может значительно повысить производительность вашего приложения. Компиляция AOT будет компилировать компоненты/директивы и шаблоны во время сборки и внедрять полученный код JavaScript непосредственно в шаблоны HTML. Это означает, что во время выполнения браузеру больше не нужно компилировать шаблоны, что сокращает время запуска и загрузки.

В частности, вот как включить компиляцию AOT:

• --aotСоздайте свое приложение , используя опцию в Angular CLI :ng build --aot
• Настройте компилятор JIT в своем приложении Angular для предварительной компиляции компонентов, как это делает AOT:

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

Выше приведены некоторые практические оптимизации производительности Angular, некоторые из которых можно применять по отдельности или одновременно, что может помочь вам максимизировать производительность приложений Angular и улучшить взаимодействие с пользователем.