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.
Aby zobaczyć to w działaniu, oto aplikacja w pakiecie webpack, która pozwala głosować na swojego ulubionego 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.
Gdy już masz konto, w sekcji profilu kliknij Ustawienia, kliknij przycisk Synchronizuj konto i upewnij się, że nowe repozytorium jest widoczne w Travisie.
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.
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 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.
W Glitch kliknij Narzędzia > Git, import i eksport > Eksportuj na GitHub.
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”.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.
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 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.
Kliknij przycisk Narzędzia.
Następnie kliknij przycisk Konsola. Otworzy się konsola w innej karcie.
W konsoli wpisz
webpack
i poczekaj na zakończenie kompilacji.Wyeksportuj kod na GitHuba, klikając Narzędzia > Git, import i eksport > Eksportuj na GitHub.
Otwórz stronę żądania pull w GitHub i poczekaj, aż wszystkie kontrole się zakończą.
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.