Korzystanie z Lighthouse Bot do ustalania budżetu wydajności

Milica Mihajlija

Masz za sobą ciężką pracę, aby zwiększyć szybkość. Teraz możesz zautomatyzować testowanie wydajności za pomocą bota Lighthouse.

Lighthouse ocenia aplikację w 5 kategoriach, z których jedną to wydajność. Możesz spróbować monitorować zmiany wydajności za pomocą DevTools lub interfejsu wiersza poleceń Lighthouse za każdym razem, gdy edytujesz kod, ale nie musisz tego robić. Narzędzia mogą za Ciebie wykonywać żmudne czynności. Travis CI to świetna usługa, która automatycznie przeprowadza testy Twojej aplikacji w chmurze za każdym razem, gdy przenosisz nowy kod.

Lighthouse Bot jest zintegrowany z Travis CI, a jego funkcja budżetu wydajności zapobiega przypadkowemu obniżeniu wydajności bez zauważenia tego faktu. Możesz skonfigurować repozytorium tak, aby nie zezważało na scalanie żądań pull, jeśli wyniki Lighthouse spadną poniżej ustawionego progu (np. < 96/100).

Niezaliczone kontrole przy użyciu botów Lighthouse w GitHubie
Sprawdzanie Lighthouse Bot w GitHub.

Chociaż możesz testować wydajność na komputerze lokalnym, na serwerach produkcyjnych Twoja witryna często działa inaczej. Aby uzyskać bardziej realistyczny obraz, najlepiej wdrożyć witrynę na serwerze testowym. Możesz użyć dowolnej usługi hostingu. W tym przewodniku omówimy hosting Firebase.

1. Konfiguracja

Ta prosta aplikacja pomaga posortować 3 liczby.

Sklonuj przykład z GitHuba i dodaj go jako repozytorium na swoim koncie GitHub.

2. Wdrażanie w Firebase

Aby rozpocząć, musisz mieć konto Firebase. Gdy to zrobisz, utwórz nowy projekt w konsoli Firebase, klikając „Dodaj projekt”:

Wdrażanie w Firebase

Do wdrożenia aplikacji potrzebny jest interfejs wiersza poleceń Firebase. Nawet jeśli jest on już zainstalowany, warto często aktualizować interfejs wiersza poleceń do najnowszej wersji za pomocą tego polecenia:

npm install -g firebase-tools

Aby autoryzować wiersz poleceń Firebase, uruchom:

firebase login

Teraz zainicjuj projekt:

firebase init

Podczas konfiguracji konsola zada Ci kilka pytań:

  • Gdy pojawi się prośba o wybranie funkcji, wybierz „Hostowanie”.
  • W przypadku domyślnego projektu Firebase wybierz projekt utworzony w konsoli Firebase.
  • Wpisz „public” jako katalog publiczny.
  • Aby skonfigurować aplikację jako aplikację jednostronicową, wpisz „N” (nie).

W ramach tego procesu w katalogu głównym katalogu projektu tworzony jest plik konfiguracji firebase.json.

Gratulacje! Możesz wdrożyć aplikację. Uruchomienie:

firebase deploy

W ułamku sekundy aplikacja będzie gotowa do użycia.

3. Konfigurowanie Travisa

Musisz zarejestrować konto w Travis, a następnie aktywować integrację z aplikacjami GitHub w sekcji Ustawienia w swoim profilu.

Integracja aplikacji GitHub w Travis CI

Gdy masz już konto

W sekcji Profil kliknij Ustawienia, a następnie kliknij przycisk Synchronizuj konto i upewnij się, że repozytorium projektu jest widoczne w Travisie.

Aby rozpocząć ciągłą integrację, musisz mieć:

  1. Plik .travis.yml znajduje się w katalogu głównym
  2. Aby uruchomić kompilację, wykonując zwykłe polecenie git push

Repozytorium lighthouse-bot-starter ma już plik YAML .travis.yml:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

Plik YAML informuje Travisa, aby zainstalował wszystkie zależności i skompilował aplikację. Teraz nadszedł czas, aby przesłać przykładową aplikację do własnego repozytorium GitHub. Jeśli jeszcze tego nie zrobiono, uruchom to polecenie:

git push origin main

Kliknij repozytorium w sekcji Ustawienia w Travis, aby wyświetlić panel Travis dotyczący Twojego projektu. Jeśli wszystko jest w porządku, po kilku minutach zobaczysz, że konstrukcja zmienia kolor z żółtego na zielony. 🎉

4. Automatyzowanie wdrażania Firebase za pomocą Travis

W kroku 2 zalogowano Cię na konto Firebase i wdrożono aplikację z poziomu wiersza poleceń za pomocą firebase deploy. Aby Travis mógł wdrożyć aplikację w Firebase, musisz ją autoryzować. Jak to zrobić? za pomocą tokena Firebase. 🗝️🔥

Autoryzuj Firebase

Aby wygenerować token, uruchom to polecenie:

firebase login:ci

Otworzy się nowa karta w oknie przeglądarki, aby Firebase mogła Cię zweryfikować. Następnie wróć do konsoli, aby zobaczyć nowo wyemitowany token. Skopiuj go i wróć do Travisa.

W panelu Travisa dla projektu kliknij Więcej opcji > Ustawienia > Zmienne środowiskowe.

Wklej token w polu wartości, nadaj zmiennej nazwę FIREBASE_TOKEN i dodaj ją.

Dodawanie wdrożenia do konfiguracji Travisa

Aby polecić Travisowi wdrożenie aplikacji po każdym udanym kompilowaniu, musisz użyć tych linii. Dodaj je na końcu pliku .travis.yml. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

Przekaż tę zmianę do GitHuba i poczekaj na pierwsze automatyczne wdrożenie. Dziennik Travis powinien zawierać informację ✔️ Wdrażanie ukończone!

Od teraz wszystkie zmiany w aplikacji będą automatycznie wdrażane w Firebase.

5. Konfigurowanie bota Lighthouse

Bot Lighthouse informuje o wynikach Lighthouse Twojej aplikacji. Wystarczy zaproszenie do Twojego repozytorium.

W GitHubie otwórz ustawienia projektu i dodaj „windowbot” jako współpracownika (Ustawienia > Współpracownicy):

Stan współpracownika bota Lighthouse

Zatwierdzenie takich próśb odbywa się ręcznie, więc nie zawsze odbywa się to od razu. Zanim zaczniesz testy, upewnij się, że Lighthousebot zatwierdził status współpracownika. Musisz też dodać kolejny klucz do zmiennych środowiskowych projektu w Travisie. Podaj swój adres e-mail, a otrzymasz klucz Lighthouse Bota w skrzynce odbiorczej. 📬

W Travisie dodaj ten klucz jako zmienną środowiskową i nadaj mu nazwę LIGHTHOUSE_API_KEY:

Dodawanie bota Lighthouse do projektu

Następnie dodaj bota Lighthouse do projektu, wykonując te czynności:

npm i --save-dev https://github.com/ebidel/lighthousebot

Dodaj też ten fragment do package.json:

"scripts": {
  "lh": "lighthousebot"
}

Dodawanie bota Lighthouse do konfiguracji Travisa

Na koniec sprawdź wydajność aplikacji po każdym żądaniu pull.

W .travis.yml dodaj kolejny krok w sekcji after_success:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

Spowoduje to przeprowadzenie audytu Lighthouse dotyczącego podanego adresu URL, więc zastąp https://staging.example.com adresem URL Twojej aplikacji (np. twoja-aplikacja-123.firebaseapp.com).

Ustaw wysokie standardy i zmodyfikuj konfigurację, aby nie akceptować żadnych zmian w aplikacji, które obniżają wynik skuteczności poniżej 95:

- npm run lh -- --perf=95 https://staging.example.com

Przesłać żądanie pull, aby wywołać test Lighthouse Bot w Travisie

Lighthouse Bot będzie testować tylko żądania pull, więc jeśli teraz wpushujesz do głównej gałęzi, w dzienniku Travisa pojawi się tylko komunikat „This script can only be run on Travis PR requests”.

Aby uruchomić test bota Lighthouse:

  1. Kup nową gałąź
  2. Prześlij go do GitHuba.
  3. Wyślij żądanie pull

Poczekaj na stronie żądania pliku do pobrania, aż Bot Lighthouse zacznie śpiewać. 🎤

Wyniki Lighthouse zaliczające

Kontrole GitHub zakończone

Wynik skuteczności jest świetny, aplikacja nie przekracza budżetu, a sprawdzenie się udało.

Więcej opcji Lighthouse

Pamiętasz, że Lighthouse testuje 5 różnych kategorii? Możesz wymusić wyniki dla dowolnego z tych elementów z oznaczeniami bota Lighthouse:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

Przykład:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

W przypadku, gdy wynik dotyczący skuteczności spadnie poniżej 93 lub wynik dotyczący SEO spadnie poniżej 100, PR nie zostanie zaakceptowany.

Możesz też zrezygnować z otrzymywania komentarzy bota Lighthouse, korzystając z opcji --no-comment.