Включите бюджеты производительности в процесс сборки.

Милица Михайлия

После того как вы определили бюджет производительности, пришло время настроить процесс сборки, чтобы отслеживать его. Существует ряд инструментов, которые позволяют вам определять пороговые значения для выбранных показателей производительности и предупреждать вас, если вы превысите бюджет. Узнайте, как выбрать тот, который лучше всего соответствует вашим потребностям и текущей настройке. 🕵️‍♀️

Бюджеты производительности маяка

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

Версия Lighthouse для командной строки (v5+) поддерживает настройку бюджетов производительности на основе:

  • размер ресурса
  • количество ресурсов

Вы можете установить бюджеты для любого из следующих типов ресурсов:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

Бюджеты задаются в файле JSON, и после их определения новый столбец «Превышение бюджета» сообщает вам, превышаете ли вы какие-либо ограничения.

Раздел «Бюджеты» в отчете Lighthouse
Раздел «Бюджеты» в отчете Lighthouse

Советы по производительности Webpack

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

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

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

Вывод вывода веб-пакета с подсветкой Bundle.js
Выделенный файл Bundle.js превышает ваш бюджет.

Предел по умолчанию для активов и точек входа составляет 250 КБ . Вы можете установить свои собственные цели в файле конфигурации.

Предупреждение о размере пакета веб-пакета
Предупреждение о размере пакета веб-пакета ⚠️

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

Рекомендации по оптимизации производительности Webpack
Бонусная функция: веб-пакет не только предупредит вас, но и порекомендует, как уменьшить размер пакетов. 💁

Размер пакета

Bundlesize — это простой пакет npm, который проверяет размер ресурса на соответствие установленному вами порогу. Он может работать локально и интегрироваться с вашим CI.

Размер пакета CLI

Запустите CLI Bundlesize, указав пороговое значение и файл, который вы хотите протестировать.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize выводит результаты теста с цветовой кодировкой в ​​одну строку.

Неудачный тест CLI размера пакета
Не удалось выполнить тест CLI на размер пакета ❌
Прохождение теста CLI на размер пакета
Прохождение теста CLI на размер пакета✔️

Размер пакета для CI

Вы получите максимальную отдачу от размера пакета, если интегрируете его с CI для автоматического соблюдения ограничений размера для запросов на включение. Если проверка размера пакета не удалась, этот запрос на извлечение не будет объединен. Он работает для запросов на извлечение на GitHub с Travis CI , CircleCI , Wercker и Drone .

Статус проверки размера пакета на GitHub
Статус проверки размера пакета на GitHub

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

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

По умолчанию он проверяет размеры ресурсов, сжатых с помощью gzip . Вы можете использовать опцию сжатия, чтобы переключиться на сжатие Brotli или полностью отключить его.

Маяк Бот

Маяк Бот

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

Очки маяка 💯
Очки маяка 💯

Lighthouse Bot проводит аудит после развертывания сайта на промежуточном сервере. В .travis.yml установите бюджеты для определенных категорий Lighthouse с опциями --perf , --a11y , --bp , --seo или --pwa . Стремитесь остаться в зеленой зоне, набрав не менее 90 очков.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Если рейтинг запроса на включение на GitHub падает ниже установленного вами порога, Lighthouse Bot может предотвратить объединение запроса на включение . ⛔

Статус проверки бота Lighthouse на GitHub
Статус проверки бота Lighthouse на GitHub

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

Оценки отчетов маяка по запросу
Оценки отчетов маяка по запросу 💬

Если вы обнаружите, что ваш запрос на включение заблокирован из-за плохой оценки Lighthouse, запустите аудит с помощью Lighthouse CLI или Dev Tools . Он генерирует отчет с подробной информацией об узких местах и ​​советами по простой оптимизации.

Краткое содержание

Инструмент интерфейс командной строки КИ Краткое содержание
Маяк ✔️ ❌
  • Бюджеты для различных типов ресурсов в зависимости от их размера или количества.
веб-пакет ✔️ ❌
  • Бюджеты основаны на размерах ресурсов, созданных веб-пакетом.
  • Проверяет несжатые размеры.
размер пакета ✔️ ✔️
  • Бюджеты основаны на размерах конкретных ресурсов.
  • Проверяет сжатые или несжатые размеры.
Маяк Бот ❌ ✔️
  • Бюджеты на основе оценок Lighthouse.