Контролируйте размеры пакетов с течением времени, чтобы обеспечить быструю работу вашего приложения.
Оптимизация приложения 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 не упадет со временем:
- Установите базовый размер ресурса либо с помощью калькулятора бюджета, либо следуя практикам вашей организации.
- Настройте бюджеты размера в
angular.json
в разделеprojects.[PROJECT-NAME].architect.build.configurations.production.budgets
- Бюджеты будут автоматически применяться к каждой сборке с помощью Angular CLI.
- Рассмотрите возможность внедрения мониторинга бюджета как части непрерывной интеграции (чего также можно достичь с помощью Angular CLI).