Как улучшить производительность в 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