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

Профилирование производительности Angular-приложения - критически важный процесс для выявления и устранения узких мест. Рассмотрим профессиональные подходы:

1. Встроенные инструменты Angular

Angular DevTools

Установите расширение для Chrome/Firefox:

  • Позволяет анализировать:
    • Дерево компонентов
    • Время рендеринга
    • Жизненные циклы компонентов
    • Change Detection

enableProdMode

Всегда включайте в production:

import { enableProdMode } from '@angular/core';
enableProdMode();

2. Инструменты браузера

Chrome DevTools Performance Tab

  1. Откройте вкладку Performance
  2. Запишите сессию
  3. Анализируйте:
    • Main thread activity
    • Frames per second (FPS)
    • CPU usage
    • Network requests

Memory Profiler

Для выявления утечек памяти:

  1. Heap Snapshots (сравнение снимков до/после действий)
  2. Allocation timeline

3. Анализ Change Detection

ng.profiler

ng.profiler.timeChangeDetection({
  record: true
});

Custom Change Detection Strategy

@Component({
  selector: 'app-example',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})

4. Логирование производительности

Angular Performance Module

import { ApplicationRef, NgZone } from '@angular/core';

constructor(appRef: ApplicationRef, zone: NgZone) {
  const originalTick = appRef.tick;
  appRef.tick = function() {
    const before = performance.now();
    const retVal = originalTick.apply(this, arguments);
    const after = performance.now();
    console.log('Change detection time:', after - before);
    return retVal;
  };
}

5. Webpack Bundle Analyzer

Для анализа размера бандлов:

  1. Установите:
npm install --save-dev webpack-bundle-analyzer
  1. Добавьте в angular.json:
"budgets": [
  {
    "type": "bundle",
    "name": "main",
    "maximumWarning": "500kb"
  }
]

6. Лучшие практики профилирования

  1. Профилируйте в production-режиме
    ng build --prod

  2. Тестируйте на реальных устройствах
    Особенно мобильные устройства

  3. Измеряйте ключевые метрики:

    • First Contentful Paint (FCP)
    • Time to Interactive (TTI)
    • Total Bundle Size

  4. Анализируйте:

    • Медленные API-запросы
    • Большие компоненты
    • Чрезмерные вычисления в шаблонах
    • Лишние перерисовки DOM

7. Продвинутые техники

TrackBy для ngFor

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

Pure Pipes вместо методов в шаблонах

@Pipe({ name: 'calculate' })
export class CalculatePipe implements PipeTransform {
  transform(value: number): number {
    // Тяжелые вычисления
  }
}

Виртуальный скроллинг

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

Резюмируем

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

Вопросы

Собеседования