Włożyłeś dużo pracy, aby przyspieszyć działanie witryny. Teraz zadbaj o to, aby tak pozostało, automatyzując testy wydajności za pomocą Lighthouse Bota.
Lighthouse ocenia aplikację w 5 kategoriach, z których jedną jest wydajność. Możesz próbować pamiętać o monitorowaniu zmian 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ą wykonywać za Ciebie żmudne czynności. Travis CI to świetna usługa, która automatycznie uruchamia testy aplikacji w chmurze za każdym razem, gdy przesyłasz nowy kod.
Lighthouse Bot integruje się z Travis CI, a jego funkcja budżetu wydajnościowego zapewnia, że nie obniżysz przypadkowo wydajności bez zauważenia tego. Możesz skonfigurować repozytorium tak, aby nie zezwalało na scalanie żądań wyciągnięcia, jeśli wyniki Lighthouse są niższe od ustawionego progu (np. < 96/100).
Chociaż możesz testować wydajność na serwerze lokalnym, witryna często działa inaczej na serwerach produkcyjnych. Aby uzyskać bardziej realistyczny obraz, najlepiej wdrożyć witrynę na serwerze testowym. Możesz użyć dowolnej usługi hostingowej. W tym przewodniku skorzystamy z Hostingu Firebase.
1. Konfiguracja
Ta prosta aplikacja pomaga sortować 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 masz go już zainstalowanego, warto często aktualizować go do najnowszej wersji za pomocą tego polecenia:
npm install -g firebase-tools
Aby autoryzować wiersz poleceń Firebase, uruchom to polecenie:
firebase login
Teraz zainicjuj projekt:
firebase init
Podczas konfiguracji konsola zada Ci kilka pytań:
- Gdy pojawi się prośba o wybranie funkcji, kliknij „Hosting”.
- W przypadku domyślnego projektu w Firebase wybierz projekt utworzony w konsoli Firebase.
- Wpisz „public” jako katalog publiczny.
- Wpisz „N” (nie), aby skonfigurować aplikację jako aplikację jednostronicową.
W tym procesie w katalogu głównym projektu zostanie utworzony plik konfiguracji firebase.json.
Gratulacje, możesz już wdrożyć aplikację. Uruchomienie:
firebase deploy
W ułamku sekundy uzyskasz dostęp do aplikacji na żywo.
3. Konfigurowanie Travisa
Musisz zarejestrować konto w Travisie, a następnie aktywować integrację z aplikacjami GitHub w sekcji Ustawienia w swoim profilu.
Gdy masz już konto
W ustawieniach profilu kliknij przycisk Synchronizuj konto i sprawdź, czy repozytorium projektu jest widoczne w Travisie.
Aby rozpocząć tryb ciągłej integracji, potrzebujesz 2 rzeczy:
- Plik
.travis.ymlw katalogu głównym - Wywoływanie kompilacji za pomocą zwykłego polecenia git push
lighthouse-bot-starter repozytorium ma już .travis.yml plik YAML:
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 możesz przesłać przykładową aplikację do własnego repozytorium GitHub. Jeśli jeszcze tego nie zrobiono, uruchom to polecenie:
git push origin main
W sekcji Ustawienia w Travis kliknij repozytorium, aby wyświetlić panel Travis projektu. Jeśli wszystko jest w porządku, po kilku minutach zobaczysz, że kolor kompilacji zmieni się z żółtego na zielony. 🎉
4. Automatyzacja wdrażania Firebase za pomocą Travisa
W kroku 2 zalogowano się na konto Firebase i wdrożono aplikację z wiersza poleceń za pomocą polecenia firebase deploy. Aby Travis mógł wdrożyć Twoją aplikację w Firebase, musisz go autoryzować. Jak to zrobić? za pomocą tokena Firebase,
🗝️🔥
Autoryzowanie Firebase
Aby wygenerować token, uruchom to polecenie:
firebase login:ci
Otworzy się nowa karta w oknie przeglądarki, aby Firebase mógł Cię zweryfikować. Następnie wróć do konsoli i sprawdź, czy pojawił się w niej Twój nowo utworzony token. Skopiuj go i wróć do Travisa.
W panelu projektu Travis kliknij Więcej opcji > Ustawienia > Zmienne środowiskowe.
Wklej token w polu wartości, nazwij zmienną FIREBASE_TOKEN i dodaj ją.
Dodawanie wdrożenia do konfiguracji Travisa
Aby poinformować Travisa, że po każdej udanej kompilacji ma wdrożyć aplikację, musisz dodać te wiersze:
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. Jeśli zajrzysz do logu Travisa, wkrótce powinien się w nim pojawić komunikat ✔️ Deploy complete!
Teraz, gdy wprowadzisz zmiany w aplikacji, zostaną one automatycznie wdrożone w Firebase.
5. Konfigurowanie bota Lighthouse
Przyjazny bot Lighthouse informuje Cię o wynikach Lighthouse Twojej aplikacji. Wystarczy zaproszenie do Twojego repozytorium.
W GitHubie otwórz ustawienia projektu i dodaj „lighthousebot” jako współpracownika (Settings > Collaborators):
Zatwierdzanie tych próśb jest procesem ręcznym, więc nie zawsze odbywa się natychmiast. Zanim zaczniesz testować, upewnij się, że bot Lighthouse ma zatwierdzony status współpracownika. W międzyczasie musisz też dodać kolejny klucz do zmiennych środowiskowych projektu w Travisie. Podaj tutaj swój adres e-mail, a otrzymasz klucz do 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, uruchamiając:
npm i --save-dev https://github.com/ebidel/lighthousebot
Dodaj ten fragment do package.json:
"scripts": {
"lh": "lighthousebot"
}
Dodawanie bota Lighthouse do konfiguracji Travisa
Na koniec przetestuj wydajność aplikacji po każdym żądaniu pobrania.
W sekcji .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
Przeprowadzi on audyt Lighthouse pod podanym adresem URL, więc zastąp
https://staging.example.com adresem URL aplikacji
(czyli your-app-123.firebaseapp.com).
Ustaw wysokie standardy i dostosuj konfigurację tak, 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
Utwórz żądanie pull, aby uruchomić test bota Lighthouse w Travisie
Bot Lighthouse będzie testować tylko żądania pull, więc jeśli teraz wprowadzisz zmiany w głównej gałęzi, w dzienniku Travisa zobaczysz tylko komunikat „This script can only be run on Travis PR requests” (Ten skrypt można uruchamiać tylko w przypadku żądań pull w Travisie).
Aby uruchomić test bota Lighthouse:
- Wyewidencjonuj nową gałąź
- Prześlij go do GitHuba
- Utwórz żądanie pull
Pozostań na stronie z żądaniem pull i poczekaj, aż bot Lighthouse zacznie śpiewać. 🎤
Wynik skuteczności jest świetny, aplikacja mieści się w budżecie, a sprawdzanie zakończyło się pomyślnie.
Więcej opcji Lighthouse
Pamiętasz, że Lighthouse testuje 5 różnych kategorii? Możesz wymusić wyniki w przypadku wszystkich stron oznaczonych przez 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 wydajności spadnie poniżej 93 lub wynik SEO spadnie poniżej 100, PR nie zostanie zaliczony.
Możesz też zrezygnować z otrzymywania komentarzy bota Lighthouse, korzystając z opcji --no-comment.