Разочарованы вашим медленным приложением на Angular? Вот как удвоить или даже утроить скорость вашего приложения Angular.

Хотите, чтобы ваше приложение Angular работало быстрее ПРЯМО СЕЙЧАС? Затем щелкните здесь, чтобы просмотреть и загрузить полный контрольный список производительности Angular.

В противном случае, если вы хотите погрузиться глубоко ...

… Познакомьтесь со всей механикой и логикой того, как мы улучшаем производительность приложения Angular, а затем читайте дальше.

У нас так много всего, что нужно покрыть, и вас ждет настоящая поездка!

Вступление

Представьте себе удвоение или утроение производительности вашего углового приложения.

Что, если ваше приложение Angular загружается вдвое быстрее?

Или после загрузки он работал во много раз быстрее, чем сейчас?

Мы можем даже пойти дальше ...

Как бы вы себя чувствовали, если бы точно знали, где искать узкие места в производительности вашего приложения Angular?

Всякий раз, когда ваш босс появляется, чтобы сказать вам, что приложение Angular работает медленно, вы точно знаете, с чего начать, и шаги, которые нужно выполнить, чтобы ваше приложение Angular работало быстрее.

Разве это не было бы замечательно?

So…

Что вы можете сделать, чтобы улучшить производительность вашего приложения Angular? И исправить проблемы с производительностью Angular?

Помимо найма консультанта по Angular, который поможет вам, вот подробное руководство по улучшению и оптимизации производительности Angular и обеспечению быстрой загрузки. Каждый. Одинокий. Время.

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

Я также даю вам контрольный список производительности Angular, который вы можете бесплатно скачать и использовать в любое время. Этот контрольный список производительности Angular был создан, чтобы помочь вам справиться с вашим приложением Angular, как рок-звезда футбола.

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

Почему приложения angular медленные?

Это потому, что Angular - дерьмовый проект?

Или потому, что он был плохо спроектирован командой Angular из Google?

Недавно я опросил группу разработчиков Angular и спросил их, что их больше всего разочаровывает в Angular.

Хотите угадать, какой ответ получил наибольшее количество голосов?

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

Многие разработчики Angular разочарованы Angular, потому что они говорят, что он медленный.

Некоторые думают, что сложно создать быстрое приложение на Angular. Особенно с учетом того, что размеры пакетов его крупнейших конкурентов - React и Vue.js - обычно примерно вдвое меньше, и на синтаксический анализ и запуск JavaScript уходит примерно половина времени.

Значит ли это, что ваше приложение Angular просто обречено работать как черепаха?

Неа. Нет, если вы примените то, что я покажу вам в этой статье, следуйте инструкциям и приступайте к работе.

Да, дружище, ты должен узнать, как сделать так, чтобы ваше приложение Angular загружалось быстрее, работало быстрее и работало быстрее.

Так с чего же начать?

Решение проблемы производительности Angular

Нам нужно определить несколько вещей, прежде чем мы углубимся в код вашего приложения Angular.

Во-первых, ваше приложение Angular может иметь два узких места в производительности.

  • Производительность при угловой нагрузке
  • Производительность Angular во время выполнения

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

После загрузки следующий тип производительности - производительность во время выполнения. Является ли ваше приложение Angular быстрым и быстрым, когда с ним взаимодействуют пользователи? Или тормозит в разы? Это свинья памяти? Или он легкий и работает быстрее даже на небольших мобильных устройствах?

И, как вы, наверное, уже догадались, наиболее распространенная проблема производительности Angular связана с первым вариантом - производительностью при загрузке Angular.

Но ни одно приложение Angular не застраховано от производительности во время выполнения. Производительность во время выполнения обычно вызвана неправильной отменой подписки на наблюдаемый объект RxJS, привязкой тысяч элементов к списку без использования trackbyFn и перегрузкой цикла обнаружения изменений.

Это руководство по производительности Angular разделено на два раздела - раздел, посвященный производительности Angular при загрузке, и раздел, посвященный производительности времени выполнения Angular.

Сначала мы рассмотрим механизмы ускорения загрузки приложения Angular. А затем, в конце концов, мы обсудим, как обеспечить быструю работу после загрузки.

Начало работы: как измерить и профилировать производительность вашего приложения Angular

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

Почему?

Некоторые разработчики знают, что им нужно оптимизировать свое приложение Angular, но они понятия не имеют, сколько и с чего именно начать. И поэтому они делают эти дикие удары по коду или конфигурации сборки, а затем обновляют приложение, чтобы увидеть, загружается ли оно быстрее, чем раньше. Такой подход к оптимизации - не что иное, как шоу клоунов, и он заслуживает всяческой критики. Это все равно, что испечь торт без необходимых мерных стаканчиков. Или переставить стулья на палубе «Титаника» до того, как он затонет.

Так какой же подход разумнее?

Мера. Мера. Мера.

Почему-то мы, разработчики, не всегда замечаем лишнюю секунду или две, которые будут беспокоить пользователей. По крайней мере, таков мой опыт.

Например, один из моих приятелей-разработчиков - разработчик Django. Он продолжал настаивать на том, что его приложение Django быстрее, чем мое приложение Angular.

Когда мы были вместе, он вытаскивал браузер и показывал мне, насколько он быстрее ...

И как мое приложение Angular было черепахой по сравнению с его материалом Django ...

И так далее, и так ... пока ...

Фактически мы начали считать миллисекунды с помощью инструмента разработчика браузера. После профилирования производительности моего приложения Angular по сравнению с его приложением Django мы обнаружили, что у них в среднем примерно одинаковое время загрузки.

Какой из них был быстрее? Не помню. 😁

Очевидно, внутренний таймер моих друзей не считал должным образом и доказывает, почему разработчик ДОЛЖЕН тщательно профилировать производительность своего приложения Angular и ТОЧНО знать, сколько миллисекунд требуется для его загрузки. Подсчитав миллисекунды, которые требуются для загрузки вашего приложения Angular, вы сможете точно знать, насколько вы улучшаете скорость загрузки и производительность, пытаясь оптимизировать. Ага, посчитай миллисекунды.

Как ускорить загрузку приложения Angular ⚡️

1. Разделите приложение на модули с отложенной загрузкой.

Много лет назад, когда я все еще был зеленым за ушами и почти ничего не знал об Angular, я создал БОЛЬШОЕ приложение angular и поместил все это в один модуль - файл app.module.ts.

Это была ошибка, которая стоила мне большого количества проблем с производительностью. Если вы не знакомы с модулями Angular, то ознакомьтесь с докладом комика Angular Шая Резника.

По умолчанию NgModules загружаются быстро, что означает, что ваше приложение Angular загружает все загружаемые NgModules, даже если они не нужны немедленно. Итак, чтобы ваше приложение Angular загружалось быстрее, вам нужно сначала разделить большого зверя на более мелкие части.

Документация по Angular прекрасно объясняет, как настраивать модули с отложенной загрузкой. Вы можете найти все примеры и лучшие практики здесь.

2. Убедитесь, что вы используете и правильно настроили свои стратегии предварительной загрузки.

После того, как наше приложение разделено на модули с отложенной загрузкой, нам нужно оптимизировать их загрузку. Фреймворк Angular дает нам две основные стратегии предварительной загрузки.

Итак, какой из них вы должны использовать?

Хорошо…

Все зависит от того, кто использует ваше приложение Angular.

Если ваши пользователи являются сотрудниками высокоскоростного оптоволоконного соединения, используйте стратегию предварительной загрузки и сразу загрузите все приложение Angular.

Но если в вашем приложении Angular есть мобильные пользователи, использующие медленные соединения 3G, то более разумным будет консервативный подход. Существуют и другие стратегии предварительной загрузки, которые вы можете установить и настроить, и если вы хотите знать больше, чем прочтите эту статью, где я подробно объясняю стратегии предварительной загрузки Angular.

3. Не просматривайте файл app.module.ts.

Недавно я просматривал код бизнес-приложения, созданного с помощью Angular. Я знал этот проект как свои пять пальцев. Или, по крайней мере, я так думал, потому что я был основным разработчиком и написал 95% кода для проекта.

Я открыл файл app.module.ts… чтобы получить представление… и был шокирован! 😲

У него были проблемы с импортом и библиотеками, которые с тех пор проект перерос.

Так что же я сделал? Я вытащил этот импорт и обрезал проект, красиво и чисто, прямо как хипстерский домашний щенок.

Да, дружище, если ваш набор приложений Angular слишком велик, я бы в первую очередь пошел на поиски в app.module.ts.

Это отличный способ быстро оптимизировать приложение Angular. И кто знает - вас могут напугать какие-нибудь странности. 🙈

4. Используйте оболочку приложения.

Что такое оболочка приложения?

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

Оболочка приложения предназначена для отображения значимой первой краски, позволяющей вашему приложению появиться быстро, прежде чем оно загрузится и проанализирует остальные файлы JavaScript.

В документации по Angular есть отличное руководство о оболочках приложений и о том, как их использовать здесь.

5. Используйте Brotli.

Brotli - это самый быстрый способ увеличить время загрузки любого приложения Angular.

Если вы никогда не слышали о Brotli, это способ сжать файлы сборки и предоставить их пользователям в виде файлов меньшего размера. Первоначально он был разработан Google в 2013 году и с тех пор приобрел большую популярность. Может быть, вы слышали об известном стандарте Gzip? Brotli был представлен как преемник Gzip и в последнее время приобрел большую популярность. В среднем вы можете ожидать, что файлы JavaScript, сжатые с помощью Brotli, будут примерно на 15% меньше, файлы HTML - примерно на 20%, а файлы CSS - примерно на 16%.

Чтобы было ясно, нет никаких особых отношений между Angular и Brotli. Вы можете использовать Brotli для сжатия чего угодно. И он так же хорошо работает с другими интерфейсными библиотеками и фреймворками, такими как React или Vue.js и другими.

Но поскольку мы с вами являемся специалистами по Angular, вот как создать собственный этап сборки, который автоматически сжимает рабочие файлы с помощью Brotli.

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

Второй пакет, который вам нужно установить, - это brotli-webpack-plugin. Вот команда.

npm i brotli-webpack-plugin --save-dev

И теперь, когда у нас установлены зависимости, нам нужно создать webpack.config.json в корневом каталоге нашего приложения Angular. Это будет выглядеть так.

Наше последнее изменение коснется файла angular.json. Мы настроим Angular для использования нашего собственного конструктора веб-пакетов и файла конфигурации веб-пакетов.

Вот как использовать Brotli с Angular. В следующий раз, когда вы создадите производственную сборку, файлы сборки вашего приложения Angular будут автоматически сжаты с помощью алгоритма Brotli, который позволяет вам передавать файлы меньшего размера в браузер вашего пользователя.

Если вы хотите узнать больше, у меня есть целая статья, объясняющая Brotli и Angular. Вы можете найти это здесь".

Как заставить ваше приложение Angular работать быстрее

1. Используйте функцию trackBy для улучшения производительности ngFor.

Фреймворк Angular основан на библиотеке Zone.js, которая запускает обнаружение изменений каждый раз, когда происходит событие DOM.

В Angular есть еще одна отличная функция под названием ngFor. Просто передайте ему массив информации для рендеринга и смотрите, как он…

… Пока он не СРЫВАЕТСЯ, ВЫКЛЮЧАЕТСЯ и ВЗРЫВАЕТСЯ вам в лицо! 🤯

Поскольку Zone.js запускает новый рендеринг каждый раз, когда происходит событие DOM, это означает, что ваш список повторно отображается при нажатии кнопки и т. Д. И, конечно, вы никогда его не видите, потому что данные списка не изменились.

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

Так как же решить эту проблему?

Мы используем функцию trackBy.

Чтобы в двух словах описать функцию Angular trackBy, это необязательная функция, которую можно использовать с ngFor из Angular. Angular trackBy используется для определения того, как отслеживать изменения для элемента в списке. Как насчет того, чтобы погрузиться в код. Что нужно для создания нашей собственной функции trackBy? И избежать дорогостоящих операций повторного рендеринга?

Ниже приведен базовый пример функции Angular trackBy. Первым шагом является добавление функции trackBy в файл Typescript наших компонентов, как это.

trackByItems(index: number, item: Item): number { return item.id; }

А затем мы изменим наш ngFor, чтобы использовать новую функцию trackBy.

<ul>
    <li *ngFor="let item of items; index as i; trackBy: trackByFn">
        {{ item.value }}
    </li>
</ul>

Вот как можно использовать функцию trackBy, чтобы ваши списки работали быстрее.

2. Настройка параметров обнаружения изменений Angular, чтобы избежать ненужных циклов обнаружения изменений.

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

Так как же отследить проблемы с производительностью обнаружения изменений?

Включить инструменты отладки Angular

Откройте файл main.ts (используемый для начальной загрузки вашего приложения Angular) и отредактируйте эти строки кода ...

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));

… Выглядеть вот так.

platformBrowserDynamic().bootstrapModule(AppModule).then(module => enableDebugTools(module.injector.get(ApplicationRef).components[0])) .catch(err => console.error(err));

Время обнаружения изменения профиля

Теперь, когда у нас включены инструменты отладки, мы можем использовать их, чтобы узнать, сколько времени занимает обнаружение изменений.

Мы запустим наше приложение Angular с ng serve --open.

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

ng.profiler.timeChangeDetection()

Для очень простого приложения Angular вы можете ожидать цикл обнаружения изменений в 0,01–0,05 миллисекунды. И хотя мнения расходятся, я бы порекомендовал вам никогда не позволять циклу обнаружения изменений превышать 10 мс.

Итак, как исправить плохую производительность обнаружения изменений?

Допустим, у нас есть компонент Angular, который отображает список из 5000 случайных чисел.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-number-list',
  template: `
    <ul>
        <li *ngFor="let number of numbers">{{ number }}</li>
    </ul>
  `,
  styleUrls: ['./number-list.component.css']
})
export class NumberListComponent implements OnInit {

  numbers: number[] = [];

  constructor() { }

  ngOnInit(): void {
    this.generateNumbers();
  }

  generateNumbers(): void {
    for(let i = 0; i < 5000; i++) {
      let number = Math.random();
      this.numbers.push(number);
    }
  }
}

Как вы думаете, насколько хорошо он будет работать?

Ну, когда я проверил цикл обнаружения изменений, он занимал как минимум 12–14 мсек. 😯

Это простой пример плохо работающего компонента. Списки - плохая причина для длинных циклов обнаружения изменений, и хороший способ исправить длинный список - использовать стратегию виртуальной прокрутки. В Angular Material CDK есть отличный пакет виртуальной прокрутки, который стоит проверить.

3. Следите за медленностью ваших HTTP-вызовов.

Может быть, медленный сервер API замедляет работу вашего приложения Angular? И если это так, как бы вы узнали?

Что ж, вы можете использовать HTTP-перехватчик для отслеживания любых медленных HTTP-вызовов. Создав перехватчик HTTP, используйте его для отслеживания времени выполнения исходящих HTTP-запросов.

Более глубокое объяснение с множеством примеров требует отдельной статьи, поэтому, если вам нужно полное пошаговое руководство по отслеживанию HTTP-запросов, нажмите здесь.

Заключение

И это, мой друг, объясняет множество способов, которыми вы можете удвоить или даже, возможно, утроить или учетверить производительность вашего приложения Angular.

Angular - это быстро развивающийся фреймворк, и это одна из причин, по которой мне нравится Angular.

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

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

Если вам понравилась эта статья или вы нашли ее полезной, нажмите кнопку 👏 и подписывайтесь на меня, чтобы увидеть больше интересных статей, подобных этой.

Follow Me: GitHub, Medium, Личный блог

Первоначально опубликовано на https://danielk.tech.