Как улучшить производительность в Angular с помощью Memoize Pipe

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

Проблема: Повторные вызовы функций

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

@Component({
  ...
  template: `
    {{ heavyComputation(person, index) }}
  `,
})
export class AppComponent {
  heavyComputation(name: string, index: number) {
    // Очень тяжелые вычисления
  }
}

Решение: Memoize Pipe для повышения производительности

Создавать отдельный pipe для каждой функции не всегда удобно, особенно если функция больше нигде не используется. Хочется универсального и гибкого решения, и именно это предлагает Memoize Pipe. Он позволяет запоминать результаты функций, избегая их повторного вызова, если входные данные остались неизменными. Это снижает нагрузку на приложение и улучшает производительность.

Пример использования:

Изначально у вас есть шаблон с вызовом функции:

@Component({
  ...
  template: `
    {{ heavyComputation(person, index) }}
  `,
})
export class AppComponent {
  heavyComputation(name: string, index: number) {
    // Очень тяжелые вычисления
  }
}

Теперь добавим мемоизацию:

Установим библиотеку:

npm i @ngx-rock/memoize-pipe

Затем импортируем FnPipe и используем его в шаблоне:

@Component({
  ...
  template: `
    {{ heavyComputation | fn : person : index }}
  `,
})
export class AppComponent {
  heavyComputation(name: string, index: number) {
    // Очень тяжелые вычисления
  }
}

Теперь Angular не будет каждый раз пересчитывать функцию, если значения её аргументов не изменились (примитивы и ссылки для массивов и объектов).

Сохранение контекста this

Если ваша функция зависит от переменных компонента, то нужно сохранить контекст. Это можно сделать с помощью стрелочной функции:

@Component(...)
export class AppComponent {     
  heavyComputation = (name: string, index: number) => {
    // Очень тяжелые вычисления
  }
}

Поддержка standalone модулей

Последние версии Memoize Pipe реализованы в виде standalone модулей.

import { FnPipe } from "@ngx-rock/memoize-pipe";

@Component({
  ...
  standalone: true,
  imports: [ FnPipe, ... ]
  ...
})
export class AppComponent { ... }

Заключение: Простая оптимизация — ощутимый результат

Когда речь идет о производительности, порой самые простые решения оказываются наиболее эффективными. Memoize Pipe — это как раз такое решение: оно помогает уменьшить количество вызовов функций, ускоряя работу приложения. Помимо этого упрощает процесс написания кода.

@ngx-rock/memoize-pipe ^[1]