Masz już za sobą ciężką pracę, którą udało Ci się osiągnąć, ale teraz zastosuj automatyzację. aby przetestować wydajność za pomocą Lighthouse Bot.
Lighthouse ocenia Twoją aplikację można podzielić na 5 kategorii, z których jedna to skuteczność. Chociaż warto pamiętać o monitoruj zmiany skuteczności za pomocą DevTools. lub interfejs wiersza poleceń Lighthouse podczas edycji kodu, nie musisz tego robić. Narzędzia mogą za Ciebie wykonywać żmudne czynności. Travis CI to doskonała usługa, która automatycznie uruchamia testy aplikacji w chmurze za każdym razem, gdy wypchniesz nowy kod.
Lighthouse Bot jest zintegrowany z Travis CI, a jego funkcja budżetu wydajności zapewnia będziesz mieć pewność, że nie zauważysz niezamierzonego obniżenia wydajności. Dostępne opcje skonfigurować repozytorium dzięki czemu nie będzie można łączyć żądań pull, jeśli wyniki w Lighthouse spadnie poniżej ustawionym próg (np. < 96/100).
Możesz sprawdzić wydajność na hoście lokalnym, ale Twoja witryna będzie często na aktywnych serwerach. Aby uzyskać bardziej realistyczny obraz, najlepiej wdrożyć witrynę na serwerze testowym. możesz skorzystać z dowolnej usługi hostingowej, w tym zajmie się hostingiem Firebase na tę platformę.
1. Konfiguracja
Ta prosta aplikacja pozwala sortować trzy liczby.
Skopiuj przykład z GitHub. pamiętaj, aby dodać go jako repozytorium na swoim koncie GitHub.
2. Wdrażanie w Firebase
Aby rozpocząć, musisz mieć konto Firebase. Gdy już to zrobisz, utworzenie nowego projektu w konsoli Firebase klikając „Dodaj projekt”:
Wdrażanie w Firebase
Do wdrożenia interfejsu wiersza poleceń Firebase potrzebny jest interfejs wiersza poleceń Firebase. . Nawet jeśli masz już ją zainstalowaną, warto często zaktualizuj interfejs wiersza poleceń do najnowszej wersji, używając 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 „Hosting”.
- 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ć usługę. Uruchomienie:
firebase deploy
Już za chwilę będziesz mieć gotową aplikację.
3. Konfigurowanie Travis
Musisz zarejestrować konto w Travis, a następnie aktywuj integrację z aplikacjami GitHub w sekcji Ustawienia w swoim profilu.
Gdy masz już konto
Przejdź do Ustawień w swoim profilu, kliknij Synchronizuj konto i sprawdź, repozytorium projektu będzie wyświetlane w systemie Travis.
Aby rozpocząć ciągłą integrację, musisz mieć:
- Aby w katalogu głównym znajdował się plik
.travis.yml - Aby aktywować kompilację przez regularne uruchamianie kompilacji za pomocą starego mechanizmu git
Repozytorium lighthouse-bot-starter zawiera 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 musisz przesłać przykładową aplikację do własnego repozytorium GitHub. Jeśli jeszcze tego nie zrobiono, uruchom to polecenie:
git push origin main
Aby wyświetlić panel Travisa dla projektu, kliknij repozytorium w sekcji Ustawienia w Travisie. Jeśli wszystko jest w porządku, w ciągu kilku minut kolor kompilacji zmieni się z żółtego na zielony. 🎉
4. Automatyzowanie wdrażania Firebase za pomocą Travis
W kroku 2 zalogowano Cię na konto Firebase i rozmieszczono aplikację z poziomu wiersza poleceń za pomocą firebase deploy. Aby Travis wdrożył Twoją aplikację
Firebase, musisz ją 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 mogła Cię zweryfikować. Gdy to zrobisz, wróć do konsoli, aby zobaczyć swój świeży 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 FIREBASE_TOKEN nazwę i dodaj ją.
Dodaj wdrożenie do konfiguracji Travis
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. Jeśli spojrzysz na log Travisa, powinieneś zobaczyć komunikat ✔️ Wdrożenie zakończone.
Od teraz za każdym razem, gdy wprowadzisz zmiany w aplikacji, zostaną one automatycznie wdrożone w Firebase.
5. Konfigurowanie bota Lighthouse
Bot Lighthouse informuje o wynikach Lighthouse Twojej aplikacji. Potrzebne będzie tylko zaproszenie do repozytorium.
W GitHubie otwórz ustawienia projektu i dodaj „lighthousebot” jako współpracownika (Ustawienia > Współpracownicy):
Zatwierdzanie tych próśb odbywa się ręcznie, więc nie zawsze się odbywa natychmiast. Zanim zaczniesz testy, upewnij się, że Lighthousebot zatwierdził jako współpracownika. W międzyczasie musisz dodać inny klucz do swojego zmiennych środowiskowych projektu w systemie Travis. Podaj swój adres e-mail, a otrzymasz klucz Lighthouse Bota w skrzynce odbiorczej. 📬
W Travis dodaj ten klucz jako zmienną środowiskową i nadaj mu nazwę LIGHTHOUSE_API_KEY:
Dodawanie bota Lighthouse do projektu
Następnie dodaj do projektu bota Lighthouse, 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
Na koniec sprawdź, czy aplikacja działa po każdym pobraniu. !
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
Skrypt przeprowadzi audyt Lighthouse na podanym URL-u. Zastąp więc https://staging.example.com adresem URL swojej aplikacji (czyli your-app-123.firebaseapp.com).
Ustaw swoje standardy na wysokim poziomie i dostosuj konfigurację tak, by nie akceptować żadnych zmian aplikacja, która ma poniżej wynik wydajnoś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 przetestuje tylko żądania pull, więc jeśli wypchniesz do gałęzi głównej pojawi się komunikat „Ten skrypt można uruchamiać tylko w przypadku żądań PR Travis”, w Dziennik Travis.
Aby uruchomić test bota Lighthouse:
- Wymeldowanie nowej gałęzi
- Przesyłanie do GitHuba
- Wyślij żądanie pull
Poczekaj na stronie żądania pull i posłuchaj, jak Bot Lighthouse zacznie śpiewać. 🎤
Wynik skuteczności jest świetny, aplikacja nie przekroczyła budżetu, a weryfikacja zakończyła się powodzeniem.
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.