Каждая команда хочет, чтобы создаваемое приложение было эффективным с точки зрения производительности, в том смысле, что то оно должно загружаться быстрее, элементы на странице должны быстро отображаться и т. д.
В таком случае имеет значения технология, которое используется для создания приложения. Например AnuglarJS, Angular2+, React, Vue и т.д.
Мой опыт написания приложений на Angular2+ и AngularJS, более 7 лет, за которые я столкнулся со многими проблемами связанными с производительностью, которые я исследовал и применил множество вещей, чтобы их решить.
Я бы хотел поделиться ими. Ниже представлен список
Всегда, по возможности, используйте Pure Pipres - Это позволяет Angular безопасно обходить Change Detection и обновлять значение только при изменении аргументов.
Используйте trackBy вместе с директивой *ngFor - trackBy с *ngFor позволяет определить функцию, которая возвращает уникальный идентификатор для каждого итерируемого элемента. Следовательно, Angular будет идентифицировать элементы по этому уникальному идентификатору, поскольку это значение не меняется (не должно) при изменении ссылки, и Angular может применить оптимизацию.
Старайтесь использовать OnPush стратегию ChangeDetectionStrategy - OnPush стратегия объясняется тем, что если мы рассматриваем ссылочные типы как неизменяемые объекты, мы можем намного быстрее определить, изменилось ли значение. Когда ссылочный тип является неизменяемым, то каждый раз, когда он обновляется, ссылка в памяти стека должна изменяться.
Оптимизируйте шаблонные выражения - Избегайте вызова функций в шаблонах. Если функция долго выполняется, то это отразится на пользователях, у которых будут провисания и медленная работа, пока эта функция выполняется. Шаблонные выражения должны выполняться быстро, если они выполняются долго их следует кэшировать.
Старайтесь избегать использование сторонних библиотек, чтобы сократить время сборки.
Используйте Web Workers - Web Worker представляет из себя асинхронную систему для web страниц, которая позволяет выполнять задачи "на заднем фоне", не зависимо от главного потока и UI. (Подробнее)
Использование Lazy loading - Lazy loading - технология в Angular, которая позволяет загружать JavaScript компоненты асинхронно, когда достигнут определенный маршрут. Это увеличивает скорость загрузки приложения, разбивая приложение на несколько пакетов.
Функция пред загрузки маршрута - Angular имеет стратегию предварительной загрузки, реализованную в модуле @angular/router. Это позволяет нам предварительно загружать ресурсы, маршруты/ссылки, модули.
Кэширование статического контента приложения - продвинутые веб-приложения могут использовать кэширования статического контента, чтобы загрузка статического контента была быстрее.
Локальное использование метода deatach() у Change Detection - Метод detach() объекта ChangeDetectorRef можно использовать для запуска локального обнаружения изменений. Локальный Change Detection запускается от компонента до его дочерних элементов, в отличие от глобального Change Detection, который запускается от корня до дочерних элементов. Таким образом, после вызова метода detach(), как только мы вызываем метод DetectChanges(), он запускаетChange Detection для Компонента и его дочерних элементов. Это будет огромная производительность, если переменная данных будет обновляться каждую секунду.
Удаление неиспользуемого кода с помощью Tree-Shaking - это процесс удаления неиспользуемых импортов в любом файле веб-приложения. Об этом позаботится система сборки angular cli при создании рабочей сборки.
Предотвращать утечки памяти, отписываясь от Observables.
Внедрите серверную визуализацию, если хотите, чтобы приложение отображалось на первой странице Google. Это полезно для поисковой оптимизации. Вы можете добиться этого, используя Angular Universal.
Декоратор заметок с Angular Pipe (Подробнее).
Я надеюсь, что эта статья поможет вам еще больше повысить производительность вашего приложения Angular.