Бюджеты производительности с Angular CLI

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

Минко Гечев

Оптимизация приложения Angular важна, но как гарантировать, что его производительность не упадет со временем? Путем введения показателей производительности и мониторинга их при каждом изменении кода!

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

Рассчитайте бюджет производительности

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

Калькулятор бюджета

Настройте бюджет производительности в Angular CLI.

Если у вас есть целевой бюджет JavaScript, вы можете обеспечить его соблюдение с помощью интерфейса командной строки Angular (CLI) . Чтобы увидеть, как это работает, посмотрите этот пример приложения на GitHub .

Вы увидите, что в angular.json настроен следующий бюджет:

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

Вот краткое изложение того, что указано:

  • Существует бюджет на пакет JavaScript под названием main .
  • Если размер main пакета превысит 170 КБ, Angular CLI отобразит предупреждение в консоли при сборке приложения.
  • Если размер main пакета превысит 250 КБ, сборка завершится неудачно.

Теперь попробуйте создать приложение, запустив ng build --prod .

Вы должны увидеть эту ошибку в консоли:

Провал бюджета

Чтобы исправить ошибку сборки, взгляните на app.component.ts , который включает импорт из rxjs/internal/operators . Это частный импорт, который не должен использоваться потребителями rxjs . Это значительно увеличивает размер пакета! Когда вы обновите правильный импорт, rxjs/operators и снова запустите сборку, вы увидите, что она успешно проходит проверку бюджета.

Обратите внимание: поскольку дифференциальная загрузка включена по умолчанию в Angular CLI, команда ng build создает две сборки приложения:

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

Файл index.html примера приложения относится к обеим сборкам, поэтому современные браузеры могут использовать преимущества меньшей сборки ECMAScript 2015, а старые браузеры могут вернуться к сборке ECMAScript 5.

Обеспечьте соблюдение своего бюджета в рамках непрерывной интеграции

Непрерывная интеграция (CI) предлагает удобный способ отслеживать бюджет вашего приложения с течением времени. И, к счастью, самый быстрый способ настроить это — создать приложение с помощью Angular CLI — никаких дополнительных действий не требуется! Всякий раз, когда пакет JavaScript превышает бюджет, процесс завершается с кодом 1, и сборка завершается неудачно.

Если вы предпочитаете, вы также можете установить бюджет производительности, используя Bundlesize и Lighthouse . Основное различие между бюджетами производительности в Angular CLI и Lighthouse заключается в том, когда выполняются проверки. Angular CLI выполняет проверки во время сборки, просматривая производственные активы и проверяя их размеры. Однако Lighthouse открывает развернутую версию приложения и измеряет размер ресурса. Оба подхода имеют свои плюсы и минусы. Проверка, которую выполняет Angular CLI, менее надежна, но намного быстрее, поскольку это поиск на одном диске. С другой стороны, LightWallet Lighthouse может выполнять очень точную проверку, учитывая динамически загружаемые ресурсы, но ему необходимо развертывать и открывать приложение при каждом запуске.

Bundlesize очень похож на проверку бюджета Angular CLI; Основное отличие состоит в том, что Bundlesize может отображать результаты проверки непосредственно в пользовательском интерфейсе GitHub.

Заключение

Установите бюджеты производительности с помощью Angular CLI, чтобы гарантировать, что производительность вашего приложения Angular не упадет со временем:

  1. Установите базовый размер ресурса либо с помощью калькулятора бюджета, либо следуя практикам вашей организации.
  2. Настройте бюджеты размера в angular.json в разделе projects.[PROJECT-NAME].architect.build.configurations.production.budgets
  3. Бюджеты будут автоматически применяться к каждой сборке с помощью Angular CLI.
  4. Рассмотрите возможность внедрения мониторинга бюджета как части непрерывной интеграции (чего также можно достичь с помощью Angular CLI).