Вы много работали, чтобы добиться высокой скорости, теперь позаботьтесь о том, чтобы она оставалась высокой, автоматизировав тестирование производительности с помощью Lighthouse Bot .
Lighthouse оценивает ваше приложение по 5 категориям, и одна из них — производительность. Хотя вы можете пытаться отслеживать изменения производительности с помощью DevTools или Lighthouse CLI каждый раз, когда редактируете код, вам это делать не обязательно. Инструменты могут сделать эту рутинную работу за вас. Travis CI — отличный сервис, который автоматически запускает тесты для вашего приложения в облаке каждый раз, когда вы отправляете новый код.
Lighthouse Bot интегрируется с Travis CI, а функция оценки производительности гарантирует, что вы случайно не снизите производительность, не заметив этого. Вы можете настроить свой репозиторий таким образом, чтобы он не разрешал слияние запросов на слияние, если оценки Lighthouse упадут ниже установленного вами порога (например, < 96/100).
Хотя вы можете протестировать производительность на локальном сервере, на реальных серверах ваш сайт часто будет работать иначе. Чтобы получить более реалистичную картину, лучше всего развернуть свой сайт на тестовом сервере. Вы можете использовать любой хостинг; в этом руководстве мы рассмотрим хостинг Firebase .
1. Настройка
Это простое приложение поможет вам отсортировать три числа.
Скопируйте пример с GitHub и обязательно добавьте его в качестве репозитория в свой аккаунт GitHub.
2. Развертывание в Firebase
Для начала вам понадобится учетная запись Firebase. После этого создайте новый проект в консоли Firebase , нажав кнопку «Добавить проект»:
Развертывание в Firebase
Для развертывания приложения вам понадобится Firebase CLI . Даже если он у вас уже установлен, рекомендуется регулярно обновлять CLI до последней версии с помощью следующей команды:
npm install -g firebase-tools
Для авторизации Firebase CLI выполните следующую команду:
firebase login
Теперь инициализируйте проект:
firebase init
В процессе настройки консоль задаст вам ряд вопросов:
- При выборе функций выберите «Хостинг».
- Для стандартного проекта Firebase выберите проект, который вы создали в консоли Firebase.
- Введите "public" в качестве названия вашего общедоступного каталога.
- Введите "N" (нет), чтобы настроить приложение как одностраничное.
В результате этого процесса в корневом каталоге вашего проекта будет создан конфигурационный файл firebase.json .
Поздравляем, вы готовы к развертыванию! Выполните:
firebase deploy
В мгновение ока у вас будет запущенное приложение.
3. Настройка Трэвиса
Вам потребуется зарегистрировать учетную запись на Travis, а затем активировать интеграцию с GitHub Apps в разделе «Настройки» вашего профиля.
После того, как у вас появится аккаунт,
Перейдите в «Настройки» в своем профиле, нажмите кнопку «Синхронизировать учетную запись» и убедитесь, что репозиторий вашего проекта указан в Travis.
Для запуска непрерывной интеграции вам понадобятся две вещи:
- Чтобы файл
.travis.ymlнаходился в корневом каталоге. - Чтобы запустить сборку, выполните обычную команду `git push`.
В репозитории lighthouse-bot-starter уже есть YAML-файл .travis.yml :
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
YAML-файл указывает Travis установить все зависимости и собрать ваше приложение. Теперь ваша очередь отправить пример приложения в свой собственный репозиторий GitHub . Если вы еще этого не сделали, выполните следующую команду:
git push origin main
В Travis перейдите в раздел «Настройки», чтобы увидеть панель мониторинга вашего проекта. Если всё в порядке, вы увидите, как ваша сборка за пару минут изменится с жёлтого на зелёный цвет. 🎉
4. Автоматизация развертывания Firebase с помощью Travis
На шаге 2 вы вошли в свою учетную запись Firebase и развернули приложение из командной строки с помощью firebase deploy . Чтобы Travis смог развернуть ваше приложение в Firebase, вам необходимо его авторизовать. Как это сделать? С помощью токена Firebase. 🗝️🔥
Авторизация Firebase
Для генерации токена выполните следующую команду:
firebase login:ci
Откроется новая вкладка в окне браузера, чтобы Firebase мог вас подтвердить. После этого вернитесь в консоль, и вы увидите свой только что созданный токен. Скопируйте его и вернитесь в Travis.
В панели управления Travis вашего проекта перейдите в раздел «Дополнительные параметры» > «Настройки» > «Переменные среды» .
Вставьте токен в поле значения, назовите переменную FIREBASE_TOKEN и добавьте её.
Добавьте развертывание в вашу конфигурацию Travis.
Следующие строки необходимы, чтобы указать Travis развертывать приложение после каждой успешной сборки. Добавьте их в конец файла .travis.yml . 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Отправьте это изменение в GitHub и дождитесь первого автоматического развертывания. Если вы посмотрите в журнал Travis, вскоре там должно появиться сообщение ✔️ Развертывание завершено!
Теперь при каждом внесении изменений в приложение они будут автоматически развертываться в Firebase.
5. Настройка бота Lighthouse
Friendly Lighthouse Bot будет информировать вас о результатах проверки Lighthouse вашего приложения. Ему нужно лишь приглашение в ваш репозиторий.
На GitHub перейдите в настройки своего проекта и добавьте «lighthousebot» в качестве соавтора (Настройки > Соавторы):
Одобрение этих запросов — ручной процесс, поэтому они не всегда происходят мгновенно. Прежде чем начать тестирование, убедитесь, что Lighthousebot подтвердил свой статус участника. Тем временем вам также необходимо добавить еще один ключ в переменные среды вашего проекта в Travis. Оставьте свой адрес электронной почты здесь , и вы получите ключ Lighthouse Bot в свой почтовый ящик. 📬
В Travis добавьте этот ключ в качестве переменной окружения и назовите её LIGHTHOUSE_API_KEY :
Добавьте Lighthouse Bot в свой проект.
Далее добавьте Lighthouse Bot в свой проект, выполнив следующую команду:
npm i --save-dev https://github.com/ebidel/lighthousebot
И добавьте этот фрагмент в файл package.json :
"scripts": {
"lh": "lighthousebot"
}
Добавьте Lighthouse Bot в конфигурацию Travis.
В качестве последнего приема, проверяйте производительность приложения после каждого запроса на слияние!
В файле .travis.yml добавьте еще один шаг в поле after_success:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Будет выполнена проверка Lighthouse по указанному URL-адресу, поэтому замените https://staging.example.com на URL-адрес вашего приложения (это your-app-123.firebaseapp.com).
Установите для себя высокие стандарты и настройте параметры таким образом, чтобы не допускать изменений в приложении, которые снижают оценку производительности ниже 95:
- npm run lh -- --perf=95 https://staging.example.com
Создайте запрос на слияние (pull request), чтобы запустить тестирование Lighthouse Bot на Travis.
Lighthouse Bot тестирует только запросы на слияние (pull requests), поэтому, если вы сейчас отправите изменения в основную ветку, в логе Travis вы увидите сообщение "Этот скрипт может быть запущен только для запросов на слияние в Travis".
Чтобы запустить тест Lighthouse Bot:
- Откройте для себя новый филиал
- Загрузите его на GitHub.
- Создайте запрос на слияние (pull request).
Подождите немного, пока Lighthouse Bot запоёт! 🎤
Показатели производительности отличные, приложение укладывается в бюджет, и проверка пройдена успешно!
Больше вариантов маяков
Помните, как Lighthouse тестирует 5 различных категорий? Вы можете устанавливать оценки для любой из них с помощью флагов Lighthouse Bot:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Пример:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Это приведет к провалу PR-кампании, если показатель эффективности упадет ниже 93 или показатель SEO упадет ниже 100.
Вы также можете отказаться от получения комментариев от Lighthouse Bot, используя опцию --no-comment .