Korzystanie z rozmiaru pakietu w Travis CI

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 zezważało na scalanie żądań pull, dopóki testy rozmiaru pakietu nie zostaną zaliczone.

Sprawdzanie w GitHub przez Bundlesize obejmuje porównanie rozmiaru z gałęzi główną oraz ostrzeżenie w przypadku dużego skoku rozmiaru.

Sprawdzanie rozmiaru pakietu w GitHub

Aby zobaczyć to w działaniu, oto aplikacja w pakiecie webpack, która pozwala głosować na swojego ulubionego kota.

Aplikacja do głosowania na kota

Ustawianie budżetu skuteczności

Ta strona Glitch zawiera już rozmiar pakietu.

  • Kliknij Remixuj 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 zagregowanego pliku JavaScript nie przekraczał zalecanego limitu, w polu maxSize ustaw 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 GitHub Apps w sekcji Ustawienia na swoim profilu.

Integracja aplikacji GitHub w Travis CI

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

Przycisk synchronizacji Travis CI

Autoryzowanie rozmiaru pakietu do publikowania w żądaniach pull

Aby publikować prośby o przechwycenie, pakiet musi mieć autoryzację, dlatego kliknij ten link, aby uzyskać token dostępu do pakietu, który będzie przechowywany w konfiguracji Travisa.

token rozmiara pakietu

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

Dodawanie zmiennych środowiskowych w Travis CI

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 wyświetli ostrzeżenie. 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 budżetu możesz spać spokojnie, wiedząc, że nie przeoczysz żadnego problemu.

Wypróbuj

Uruchom pierwszy test rozmiaru pakietu

Aby sprawdzić, jak aplikacja wypada w porównaniu z budżetem na podstawie skutecznoś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 GitHuba i nazwę repozytorium w postaci username/repo. Glitch wyeksportuje Twoją 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 skompilowania zobaczysz teraz stan sprawdzania.

Trwają kontrole GitHub

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.

Nieudana kontrola rozmiaru pakietu

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 używa Bazy danych czasu rzeczywistego Firebase do przechowywania danych, ale importuje cały pakiet Firebase, który składa się z wiele więcej niż tylko z bazy danych (uwierzytelnianie, pamięć masowa, wiadomości itp.).

Aby to naprawić, zaimportuj do pliku src/index.js tylko 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. Otworzy się konsola 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 GitHub i poczekaj, aż wszystkie kontrole się zakończą.

Przeszedł kontrolę rozmiaru pakietu

Gotowe! Nowy rozmiar pakietu to 125,5 KB i przeszedł wszystkie testy. 🎉

W odróżnieniu od Firebase importowanie części biblioteki momentów nie jest tak proste, 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 wszystko jest w porządku. Travis CI i bundlesize będą monitorować budżet wydajności, aby Twoja aplikacja była szybka.