Korzystanie z rozmiaru pakietu w Travis CI

Używanie atrybutu bundlesize w Travis CI pozwala definiować budżety wydajności przy minimalnej konfiguracji i egzekwować je w ramach przepływu pracy związanej z programowaniem. Travis CI to usługa, która uruchamia testy aplikacji w chmurze za każdym razem, gdy przesyłasz kod do GitHuba. Możesz skonfigurować repozytorium w taki sposób, aby scalać żądania pull, chyba że testy rozmiaru pakietu zakończą się powodzeniem.

Kontrole GitHub w usłudze Bundle obejmują porównanie rozmiaru z gałęzią główną oraz ostrzeżenie w przypadku dużego skoku rozmiaru.

Sprawdzanie pakietów w GitHubie

Aby zobaczyć, jak to działa, możesz dołączyć do pakietu internetowego aplikację, która pozwala zagłosować na ulubionego kotka.

Aplikacja do głosowania dla kotów

Ustal budżet skuteczności

This Glitch zawiera już rozmiar pakietu.

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

Główny pakiet tej aplikacji znajduje się w folderze publicznym. Aby sprawdzić jego rozmiar, dodaj do pliku package.json tę sekcję:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Aby utrzymać rozmiar skompresowanego pakietu JavaScript poniżej zalecanego limitu, w polu maxSize ustaw budżet wydajności na 170 KB.

Bundle obsługuje wzorce glob, a znak wieloznaczny * w ścieżce pliku pasuje do wszystkich nazw pakietów w folderze publicznym.

Tworzenie skryptu testowego

Travis wymaga wykonania testu, więc dodaj do package.json skrypt testowy:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Skonfiguruj tryb ciągłej integracji

Integracja GitHub i Travis CI

Najpierw utwórz na swoim koncie GitHub nowe repozytorium dla tego projektu i zainicjuj je przy użyciu polecenia README.md.

Musisz zarejestrować konto na Travis i aktywować integrację aplikacji z GitHuba w sekcji Ustawienia w swoim profilu.

Integracja aplikacji GitHub w Travis CI

Gdy masz już konto, otwórz Ustawienia w swoim profilu, kliknij przycisk Synchronizuj konto i sprawdź, czy nowe repozytorium znajduje się w Travis.

Przycisk synchronizacji Travis CI

Autoryzowanie rozmiaru pakietu do publikowania w żądaniach pull

Usługa Bundle wymaga autoryzacji, aby móc publikować w żądaniach pull. Otwórz ten link, aby pobrać token rozmiaru pakietu, który będzie przechowywany w konfiguracji Travis.

token rozmiaru pakietu

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

Dodawanie zmiennych środowiskowych w Travis CI

Dodaj nową zmienną środowiskową, podając token jako pole wartości, i nazwę BUNDLESIZE_GITHUB_TOKEN.

Ostatnią rzeczą, jaką musisz rozpocząć, jest plik .travis.yml, który informuje Travis CI o tym, co ma się stać. Aby przyspieszyć ten proces, jest już uwzględniony w projekcie i określa, że aplikacja używa NodeJS.

Na tym etapie masz już wszystko skonfigurowane, a rozmiar pakietu wyświetli ostrzeżenie, jeśli JavaScript przekroczy budżet. Nawet jeśli zaczniesz świetnie, z czasem, gdy dodasz nowe funkcje, możesz zrobić coraz więcej kilobajtów. Dzięki automatycznemu monitorowaniu budżetu skuteczności możesz spać spokojnie, wiedząc, że każdy wynik będzie zauważony.

Wypróbuj

Aktywuj pierwszy test rozmiaru pakietu

Aby sprawdzić, jak aplikacja wypada na tle budżetu wydajności, dodaj kod do repozytorium GitHub utworzonego w kroku 3.

  1. W usłudze Glitch kliknij Tools (Narzędzia) > Git, Import, and Export (Git, Import, and Export) > Export to GitHub (Eksportuj do GitHuba).

  2. W wyskakującym okienku wpisz swoją nazwę użytkownika GitHuba i nazwę repozytorium jako username/repo. Glitch wyeksportuje aplikację do nowej gałęzi o nazwie „glitch”.

  3. Utwórz nowe żądanie pull, klikając przycisk Nowe żądanie pull na stronie głównej repozytorium.

Na stronie żądania pull zobaczysz teraz stan sprawdzania stanu.

Trwa sprawdzanie GitHuba

Niedługo zakończymy weryfikację. Niestety aplikacja do głosowania w przypadku kotów jest zbyt rozszerzona i nie przeszła kontroli budżetu wydajności. Pakiet główny ma 266 KB, a budżet wynosi 170 KB.

Nie udało się sprawdzić rozmiaru pakietu

Optymalizuj

Na szczęście jest kilka skutecznych rozwiązań poprawiających skuteczność, które możesz poprawić, usuwając nieużywany kod. W usłudze src/index.js wyróżnia się 2 główne importy:

import firebase from "firebase";
import * as moment from 'moment';

Aplikacja do przechowywania danych korzysta z Bazy danych czasu rzeczywistego Firebase, ale importuje cały pakiet Firebase, który zawiera znacznie więcej niż tylko bazę danych (uwierzytelnianie, miejsce na dane, przesyłanie wiadomości itp.).

Rozwiąż ten problem, importując do pliku src/index.js tylko pakiet, którego aplikacja potrzebuje:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Uruchom test ponownie

Plik źródłowy został zaktualizowany, dlatego musisz uruchomić pakiet internetowy, aby utworzyć nowy plik pakietu.

  1. Kliknij przycisk Narzędzia.

  2. Następnie kliknij przycisk Konsola. Spowoduje to otwarcie konsoli w innej karcie.

  3. W konsoli wpisz webpack i poczekaj, aż kompilacja się zakończy.

  4. Wyeksportuj kod do GitHuba, wybierając Narzędzia > Git, import i eksport > Eksportuj do GitHuba.

  5. Otwórz stronę żądania pull w GitHubie i poczekaj na zakończenie wszystkich kontroli.

Pomyślna kontrola rozmiaru pakietu

Success! Nowy rozmiar pakietu wynosi 125,5 KB i wszystkie testy zostały zaliczone. 🎉

W przeciwieństwie do Firebase importowanie części biblioteki momentów nie jest tak łatwe, ale warto spróbować. Z artykułu Usuwanie nieużywanego kodu w Codelabs dowiesz się, jak jeszcze bardziej zoptymalizować aplikację.

Monitorowanie

Budżet aplikacji został wyczerpany i wszystko jest w porządku. Travis CI i rozmiar pakietu będą monitorować budżet wydajności, zapewniając szybkość działania aplikacji.