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

Masz już za sobą ciężką pracę przy szybkim działaniu. Teraz zadbaj o szybkie działanie, automatyzując testowanie wydajności za pomocą bota Lighthouse.

Lighthouse ocenia aplikację w 5 kategoriach, z których jedna to wydajność. Chociaż możesz spróbować monitorować zmiany wydajności za każdym razem, gdy edytujesz kod, za pomocą DevTools lub Lighthouse CLI, nie musisz tego robić. Narzędzia mogą wykonać uciążliwe rzeczy. Travis CI to świetna usługa, która automatycznie przeprowadza testy aplikacji w chmurze za każdym razem, gdy wprowadzasz nowy kod.

Narzędzie Lighthouse Bot integruje się z Travis CI, dzięki czemu jego funkcja budżetu wydajności nie powoduje przypadkowego obniżenia wydajności bez powiadomienia. Możesz skonfigurować repozytorium w taki sposób, aby nie zezwalało na scalanie żądań pull, jeśli wyniki Lighthouse będą niższe od ustawionego przez Ciebie progu (np. < 96/100).

Możesz przetestować wydajność na serwerze lokalnym, ale Twoja witryna często będzie działać inaczej na aktywnych serwerach. Aby uzyskać bardziej realistyczny obraz, najlepiej wdrożyć witrynę na serwerze testowym. Możesz korzystać z dowolnej usługi hostingowej – w tym przewodniku możesz wypróbować hosting w Firebase.

1. Konfiguracja

Ta prosta aplikacja pomoże Ci posortować 3 liczby.

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

2. Wdróż w Firebase

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

Wdrażanie w Firebase

Do wdrożenia aplikacji potrzebujesz interfejsu wiersza poleceń Firebase. Nawet jeśli masz już ją zainstalowaną, warto często aktualizować ten interfejs do najnowszej wersji za pomocą tego polecenia:

npm install -g firebase-tools

Aby autoryzować wiersz poleceń Firebase, uruchom polecenie:

firebase login

Teraz zainicjuj projekt:

firebase init

Podczas konfiguracji konsola zada Ci serię pytań:

• Gdy pojawi się prośba o wybranie funkcji, wybierz „Hosting”.
• Jako domyślny projekt Firebase wybierz utworzony przez siebie projekt w konsoli Firebase.
• Jako katalog publiczny wpisz „public”.
• Aby skonfigurować aplikację jako aplikację jednostronicową, wpisz „N” (nie).

Ten proces utworzy plik konfiguracji firebase.json w katalogu głównym katalogu projektu.

Gratulacje, możesz rozpocząć wdrożenie. Uruchomienie:

firebase deploy

W kilka sekund masz aktywną aplikację.

3. Konfigurowanie systemu Travis

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

Jeśli masz już konto

Otwórz Ustawienia w swoim profilu, naciśnij przycisk Synchronizuj konto i sprawdź, czy repozytorium Twojego projektu znajduje się w Travis.

Aby rozpocząć tryb ciągłej integracji, potrzebujesz 2 rzeczy:

1. Aby umieścić plik .travis.yml w katalogu głównym
2. Aby aktywować kompilację za pomocą zwykłego, starego typu push git

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 umożliwia Travis zainstalowanie wszystkich zależności i skompilowanie aplikacji. Teraz Twoja kolej na przesłanie przykładowej aplikacji do własnego repozytorium na GitHubie. Uruchom to polecenie, jeśli jeszcze nie zostało wykonane:

git push origin main

Kliknij repozytorium w sekcji Settings (Ustawienia) w Travis, aby wyświetlić panel Travis projektu. Jeśli wszystko jest w porządku, w ciągu kilku minut kompilacja zmieni kolor z żółtego na zielony. 🎉

4. Zautomatyzuj wdrażanie Firebase za pomocą Travis

W kroku 2 zalogowałeś(-aś) się na konto Firebase i wdrożono aplikację z poziomu wiersza poleceń przy użyciu polecenia firebase deploy. Aby Travis wdrożył Twoją 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 umożliwić Firebase weryfikację Twojej tożsamości. Gdy to zrobisz, w konsoli znajdziesz nowo wygenerowany token. Skopiuj go i wróć do Travisa.

W panelu Travis swojego projektu kliknij Więcej opcji > Ustawienia > Zmienne środowiskowe.

Wklej token w polu wartości, nazwij zmienną FIREBASE_TOKEN i dodaj ją.

Dodaj wdrożenie do konfiguracji Travis

Potrzebujesz poniższych wierszy, aby poinformować Travis o wdrożeniu aplikacji po każdej udanej kompilacji. Dodaj je na końcu pliku .travis.yml. 🔚

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

Wypchnij tę zmianę do GitHuba i poczekaj na pierwsze automatyczne wdrożenie. W dzienniku Travis powinien pojawić się komunikat ✔️ Wdrożenie zakończone.

Wszystkie zmiany wprowadzone w aplikacji będą teraz automatycznie wdrażane w Firebase.

5. Konfigurowanie bota Lighthouse

Przyjazny bot Lighthouse będzie informować Cię o wynikach Twojej aplikacji w Lighthouse. Potrzebne jest tylko zaproszenie do repozytorium.

W GitHubie przejdź do ustawień projektu i dodaj „ Lighthousebot” jako współpracownika (Ustawienia > Współpracownicy):

Zatwierdzanie takich próśb to proces ręczne, więc nie zawsze są one realizowane od razu. Przed rozpoczęciem testów upewnij się, że latarnia morska zatwierdziła swój status współpracownika. W międzyczasie musisz też dodać kolejny klucz do zmiennych środowiskowych projektu w Travis. Zostaw tu swojego e-maila, a otrzymasz w skrzynce odbiorczej klucz bota Lighthouse. 📬

W Travis 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, uruchamiając polecenie:

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

I dodaj ten fragment do package.json:

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

Dodawanie bota Lighthouse do konfiguracji Travis

Ostatnia sztuczka: przetestuj wydajność aplikacji po każdym żądaniu pull.

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

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

Uruchomi on audyt Lighthouse dla danego adresu URL, więc zastąp https://staging.example.com adresem URL swojej aplikacji (tj. twoje-app-123.firebaseapp.com).

Ustaw wysokie standardy i dostosuj konfigurację tak, aby nie akceptować żadnych zmian w aplikacji, które powodują obniżenie wyniku wydajności poniżej 95:

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

Wyślij żądanie pull, aby uruchomić test bota Lighthouse w Travis

Lighthouse Bot będzie testować tylko żądania pull, więc jeśli teraz przeniesiesz do głównej gałęzi, w dzienniku Travis pojawi się komunikat „Ten skrypt może być uruchamiany tylko w przypadku żądań PR Travis”.

Aby uruchomić test bota Lighthouse:

1. Płatność w nowym oddziale
2. Prześlij do GitHuba
3. Wyślij żądanie pull

Zaczekaj na stronę z żądaniem pull i poczekaj, aż bot Lighthouse zacznie śpiewać. 🎤

Wynik wydajności jest doskonały, aplikacja nie mieści się w budżecie, a weryfikacja zakończona.

Więcej opcji Lighthouse

Pamiętasz, jak Lighthouse testuje 5 różnych kategorii? Możesz egzekwować wyniki dla każdego z tych z flagami 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

Jeśli wynik spadnie poniżej 93 lub wynik SEO spadnie poniżej 100, spowoduje to odrzucenie PR.

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