Korzystanie z rozmiaru pakietu w Travis CI

Milica Mihajlija

Używanie bundlesize z Travis CI pozwala określać budżety wydajnościowe przy minimalnej konfiguracji i egzekwować je w ramach procesu tworzenia. Travis CI to usługa, która za każdym razem, gdy przesyłasz kod do GitHuba, uruchamia testy aplikacji w chmurze. Możesz skonfigurować swoje repozytorium tak, aby nie zezwalało na scalanie żądań pull, dopóki nie przejdą testów bundlesize.

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

Aby zobaczyć, jak to działa, oto aplikacja spakowana za pomocą webpacka, która pozwala głosować na ulubionego kotka.

Ustawianie budżetu wydajnościowego

Ten Glitch zawiera już bundlesize.

• Aby umożliwić edytowanie projektu, kliknij Remix to Edit (Zremiksuj, aby edytować).

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

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

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

Bundlesize obsługuje wzorce glob i symbol wieloznaczny * w ścieżce pliku, który będzie pasować do wszystkich nazw pakietów w folderze public.

Tworzenie scenariusza testowania

Ponieważ Travis musi uruchomić test, dodaj scenariusz testowania do 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ą pliku README.md.

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

Gdy masz już konto, w profilu kliknij Settings (Ustawienia), a potem Sync account (Synchronizuj konto). Upewnij się, że nowe repozytorium jest widoczne w Travis.

Autoryzowanie bundlesize do publikowania w żądaniach pull

Bundlesize potrzebuje autoryzacji, aby móc publikować w żądaniach pull. Kliknij ten link , aby uzyskać token bundlesize , który zostanie zapisany w konfiguracji Travis.

Na panelu Travis projektu kliknij More options (Więcej opcji) > Settings (Ustawienia) > Environment variables (Zmienne środowiskowe).

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

Ostatnią rzeczą, której potrzebujesz do rozpoczęcia trybu ciągłej integracji, jest plik .travis.yml, który informuje Travis CI, co ma robić. Aby przyspieszyć pracę, jest on już uwzględniony w projekcie i określa, że aplikacja używa NodeJS.

Po wykonaniu tego kroku wszystko jest gotowe, a bundlesize ostrzeże Cię, jeśli Twój kod JavaScript przekroczy budżet. Nawet jeśli zaczniesz dobrze, z czasem, gdy będziesz dodawać nowe funkcje, kilobajty mogą się kumulować. Dzięki automatycznemu monitorowaniu budżetu wydajnościowego możesz mieć pewność, że nie zostanie to niezauważone.

Wypróbuj

Uruchamianie pierwszego testu bundlesize

Aby sprawdzić, jak aplikacja wypada w porównaniu z budżetem wydajnościowym, dodaj kod do repozytorium GitHub utworzonego w kroku 3.

1. W Glitch kliknij Tools (Narzędzia) > Git, Import, and Export (Git, importowanie i eksportowanie) > Export to GitHub (Eksportuj do GitHuba).

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

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

Na stronie żądania pull zobaczysz teraz sprawdzanie stanu.

Wkrótce wszystkie testy zostaną zakończone. Niestety, aplikacja do głosowania na koty jest nieco rozbudowana i nie przechodzi testu budżetu wydajnościowego. Główny pakiet ma 266 KB, a budżet wynosi 170 KB.

Optymalizuj

Na szczęście możesz łatwo zwiększyć wydajność, usuwając nieużywany kod . W pliku src/index.js są 2 główne importy:

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 zawiera znacznie więcej niż tylko bazę danych (uwierzytelnianie, pamięć masowa, przesyłanie wiadomości itp.).

Aby to naprawić, zaimportuj tylko pakiet, którego aplikacja potrzebuje, w pliku src/index.js:

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

Uruchom test ponownie

Ponieważ plik źródłowy został zaktualizowany, musisz uruchomić webpacka, aby utworzyć nowy plik pakietu.

1. Kliknij przycisk Tools (Narzędzia).

2. Następnie kliknij przycisk Console (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, klikając Tools (Narzędzia) > Git, Import, and Export (Git, importowanie i eksportowanie) > Export to GitHub (Eksportuj do GitHuba).

5. Otwórz stronę żądania pull na GitHubie i poczekaj, aż wszystkie testy się zakończą.

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

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

Monitoruj

Aplikacja mieści się teraz w budżecie i wszystko jest w porządku. Travis CI i bundlesize będą monitorować budżet wydajnościowy, aby aplikacja działała szybko.