Korzystanie z rozmiaru pakietu w Travis CI

Milica Mihajlija

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.

Uwaga: rozmiaru pakietu możesz również używać z usługami Circle CI, Wrecker i Drone.

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

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"
  }
]

Uwaga: możesz też ustawić różne progi dla różnych plików. Jest to szczególnie przydatne, jeśli dzielisz pakiet w aplikacji.

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.

Uwaga: domyślnie rozmiar pakietu sprawdza rozmiary spakowane do pliku gzip. Możesz użyć opcji kompresji, aby przełączyć się na kompresję brotli lub całkowicie ją wyłączyć.

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.

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

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.

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

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.

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.

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';

Uwaga: import firebase/app, który konfiguruje platformę API dla każdej z różnych usług, jest zawsze wymagany.

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.

Gotowe. 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.