Повышение производительности в Angular: стратегии и примеры кода

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

Оптимизация обнаружения изменений

Механизм обнаружения изменений Angular отвечает за отслеживание изменений и соответствующее обновление DOM. Однако неэффективное обнаружение изменений может привести к снижению производительности. Вот несколько советов по оптимизации:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

б. Используйте неизменяемые структуры данных. Неизменяемость позволяет Angular оптимизировать обнаружение изменений путем сравнения ссылок на объекты. Такие библиотеки, как Immutable.js или Immer.js, могут помочь вам добиться неизменности вашего приложения.

Ленивая загрузка

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

а. Создайте модуль маршрутизации для модуля с ленивой загрузкой:

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

б. Настройте маршрут в главном модуле маршрутизации:

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

Используйте TrackBy в ngFor

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

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

trackByFn(index: number, item: any): string {
  return item.id;
}

Виртуальная прокрутка

При работе с большими списками виртуальная прокрутка — это метод, который отображает только видимую часть списка, что значительно повышает производительность. Angular предоставляет компонент cdk-virtual-scroll-viewport из библиотеки CDK для виртуальной прокрутки.

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

Оптимизация сетевых запросов

Уменьшение количества и размера сетевых запросов может значительно повысить производительность приложений. Рассмотрим следующие техники:

a. Минимизируйте и объединяйте активы: минимизируйте и объединяйте активы вашего приложения с помощью таких инструментов, как Webpack или Angular CLI. Это уменьшает количество HTTP-запросов, сделанных браузером.

б. Реализуйте кэширование: используйте кэширование браузера, установив соответствующие заголовки управления кешем для статических ресурсов, таких как изображения, файлы CSS и JavaScript.

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

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