Как оптимизировать производительность Angular-приложения

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

1. Ленивая загрузка модулей

Одним из наиболее эффективных способов уменьшения времени загрузки начальной страницы является реализация ленивой загрузки (lazy loading) модулей. Это позволяет загружать части приложения только тогда, когда они действительно необходимы.

Пример реализации:

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
];

Эффект ленивой загрузки зависит от структуры приложения. Сравнивайте размер initial bundle, LCP и время до интерактивности на одном наборе устройств до и после изменения.

2. ChangeDetectionStrategy.OnPush

По умолчанию Angular проверяет все компоненты на изменения при любом событии. Использование ChangeDetectionStrategy.OnPush позволяет компоненту перепроверяться только при изменении входных данных (@Input), что значительно сокращает количество проверок.

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductCardComponent {
  @Input() product: Product;
}

3. Trackby в ngFor

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

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

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

Для больших списков проверяйте время рендеринга профилировщиком и фиксируйте одинаковый объём данных в контрольном сценарии.

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

Для приложений с длинными списками данных реализуйте виртуальную прокрутку с помощью CDK Virtual Scroll, которая рендерит только те элементы, которые видны пользователю.

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

5. Angular Universal (SSR)

Server-Side Rendering позволяет сгенерировать HTML на сервере, что ускоряет первоначальную загрузку страницы и улучшает SEO.

ng add @nguniversal/express-engine

6. Оптимизация бандлов

6.1 Анализ размера

Используйте webpack-bundle-analyzer для анализа размера вашего бандла:

ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

6.2 Tree Shaking

Убедитесь, что вы импортируете только необходимые модули:

// Вместо этого
import * as _ from 'lodash';

// Используйте это
import { debounce } from 'lodash-es';

7. Оптимизация Angular-pipe

Используйте чистые (pure) pipe для трансформации данных вместо методов компонента или импульсивных вычислений в шаблоне.

@Pipe({
  name: 'filterProducts',
  pure: true
})
export class FilterProductsPipe implements PipeTransform {
  transform(products: Product[], term: string): Product[] {
    return term
      ? products.filter(p => p.name.toLowerCase().includes(term.toLowerCase()))
      : products;
  }
}

8. Избегайте утечек памяти

Правильно отписывайтесь от Observable, особенно в компонентах, которые часто создаются и уничтожаются:

export class SearchComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject();

  ngOnInit() {
    this.searchService.search()
      .pipe(takeUntil(this.destroy$))
      .subscribe(results => this.results = results);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

9. Оптимизация шаблонов

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

<!-- Плохо -->
<div *ngFor="let item of getFilteredItems()">
  {{ item.name }}
</div>

<!-- Хорошо -->
<div *ngFor="let item of filteredItems">
  {{ item.name }}
</div>

// Вычисляем один раз и храним результат
ngOnInit() {
  this.filteredItems = this.getFilteredItems();
}

10. Профилирование и измерение

Регулярно измеряйте производительность вашего приложения с помощью инструментов Chrome DevTools, Lighthouse и Angular DevTools. Это поможет вам выявить узкие места и оценить эффективность оптимизаций.

Пример из практики

В недавнем проекте для крупного ритейлера мы столкнулись с проблемой производительности в административной панели, где отображались тысячи товаров. Применение комбинации методов — виртуальной прокрутки, ChangeDetectionStrategy.OnPush и trackBy — позволило сократить время рендеринга списка с 3.5 секунд до 300 мс, что значительно улучшило пользовательский опыт.

Заключение

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

В Астар АйТи мы уделяем особое внимание производительности разрабатываемых решений и имеем большой опыт оптимизации сложных веб-приложений. Если вам нужна помощь в оптимизации вашего Angular-проекта, обращайтесь к нашим экспертам.