Korzystanie z rozmiaru pakietu w Travis CI

Milica Mihajlija

Korzystanie z kompilacji bundlesize w ramach Travis CI pozwala definiować budżety skuteczności z minimalną konfiguracją i stosować je w ramach procesu programowania. Travis CI to usługa, która przeprowadza testy Twojej aplikacji w chmurze za każdym razem, gdy przenosisz kod do GitHuba. Możesz skonfigurować repozytorium tak, aby nie zezwalanie na scalanie żądań pull, dopóki nie zostaną zaliczone testy rozmiaru pakietu.

Kontrole na GitHubie dotyczące pakietu SDK obejmują porównanie rozmiaru z gałęzią główną oraz ostrzeżenie w przypadku dużego skoku rozmiaru.

Aby zobaczyć, jak to działa, przygotowaliśmy aplikację z pakietem internetowym, która pozwala zagłosować na ulubionego kota.

Ustawianie budżetu skuteczności

Ta usterka już zawiera rozmiar pakietu.

• Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.

Główny pakiet tej aplikacji znajduje się w folderze publicznym. Aby przetestować rozmiar, dodaj do pliku package.json następującą sekcję:

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

Aby rozmiar skompresowanego pakietu JavaScriptu nie przekraczał zalecanego limitu, ustaw w polu maxSize budżet wydajności na 170 KB.

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

Tworzenie skryptu testowego

Travis potrzebuje testu do uruchomienia, więc dodaj skrypt testowy do pliku package.json:

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

Konfigurowanie trybu ciągłej integracji

Integracja GitHuba i Travis CI

Najpierw utwórz nowe repozytorium dla tego projektu na swoim koncie GitHub i zainicjuj je za pomocą README.md.

Musisz zarejestrować konto w Travisie i aktywować integrację z aplikacjami GitHub w sekcji Ustawienia na swoim profilu.

Gdy już masz konto, w sekcji profilu kliknij Ustawienia, a potem kliknij przycisk Synchronizuj konto i upewnij się, że nowe repozytorium jest widoczne w Travisie.

Autoryzowanie rozmiaru pakietu do publikowania w żądaniach pull

Pakiet Bundle wymaga autoryzacji, aby móc publikować w żądaniach pull, więc kliknij ten link, aby pobrać token rozmiaru pakietu, który będzie przechowywany w konfiguracji Travis.

Na panelu Travisa kliknij Więcej opcji > Ustawienia > Zmienne środowiska.

Dodaj nową zmienną środowiskową z tokenem jako polem wartości i BUNDLESIZE_GITHUB_TOKEN jako nazwą.

Ostatnią rzeczą, której potrzebujesz do rozpoczęcia ciągłej integracji, jest plik .travis.yml, który mówi Travis CI, co ma robić. Aby przyspieszyć proces, plik ten jest już dołączony do projektu i określa, że aplikacja używa NodeJS.

Po wykonaniu tego kroku wszystko będzie gotowe. Jeśli budżet JavaScript przekroczy dozwoloną kwotę, bundlesize ostrzeże Cię o tym. Nawet jeśli zaczniesz od świetnego wyniku, z upływem czasu, gdy będziesz dodawać nowe funkcje, kilobajty mogą się kumulować. Dzięki automatycznemu monitorowaniu skuteczności budżetu możesz spać spokojnie, wiedząc, że nie umknie on Twojej uwadze.

Wypróbuj

Uruchamianie pierwszego testu rozmiaru pakietu

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

1. W Glitch kliknij Narzędzia > Git, import i eksport > Eksportuj na GitHub.

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

3. Aby utworzyć nową prośbę o przechwycenie, na stronie głównej repozytorium kliknij przycisk Nowa prośba o przechwycenie.

Na stronie żądania pull zobaczysz teraz stan trwającej kontroli stanu.

Nie potrwa długo, aż wszystkie kontrole zostaną zakończone. Aplikacja do głosowania na kota jest trochę za duża i nie przechodzi kontroli budżetu pod kątem skuteczności. Główny pakiet ma rozmiar 266 KB, a budżet – 170 KB.

Optymalizuj

Na szczęście możesz łatwo zwiększyć skuteczność, usuwając nieużywany kod. W src/index.js występują 2 główne rodzaje importu:

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

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

Żeby rozwiązać ten problem, zaimportuj w pliku src/index.js tylko ten pakiet, którego potrzebuje aplikacja:

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

Uruchom test ponownie

Ponieważ plik źródłowy został zaktualizowany, musisz uruchomić webpack, 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 na zakończenie kompilacji.

4. Wyeksportuj kod na GitHuba, klikając Narzędzia > Git, import i eksport > Eksportuj na GitHub.

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

Gotowe! Nowy rozmiar pakietu to 125,5 KB.Wszystkie testy zostały zakończone. 🎉

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

Monitorowanie

Aplikacja nie przekracza już budżetu i nie ma problemu. Travis CI i bundlesize będą monitorować budżet wydajności, aby aplikacja działała szybko.