Śledzenie i kontrolowanie rozmiaru paczki aplikacji może być trudnym zadaniem. Nawet najmniejszy pull request może skutkować znaczącym zwiększeniem bundle size. Jeśli kiedykolwiek pracowałeś nad optymalizacją initial bundle aplikacji, musisz wiedzieć, że utrzymanie lekkiej paczki jest nie lada wyzwaniem. Na szczęście na rynku są dostępne narzędzia, które mogą pomóc w ochronie paczki aplikacji przed jej niekontrolowanym rozrastaniem.
Jeśli jesteś zainteresowany optymalizacją bundle size twojej aplikacji, koniecznie sprawdź mój poprzedni artykuł – "Jak Zoptymalizować Bundle Size Angulara". Zawiera on podstawowe informacje na temat bundle size, narzędzi do jego analizy oraz kilka technik optymalizacji.
Dlaczego Warto Kontrolować Bundle Size
Śledzenie rozmiaru paczki może zapobiec jej puchnięciu, co mogłoby skutkować długimi czasami ładowania aplikacji. Pewnie już wiesz, że optymalizacja bundle size aplikacji to trudny i długotrwały proces wprowadzania drobnych usprawnień. Z tego powodu lepiej jest regularnie monitorować bundle size – zapobiega to sytuacjom, w których po miesiącu odkrywamy problem i dopiero wtedy przeprowadzamy optymalizację.
Czy wiesz, że importowanie małej pojedynczej funkcjonalności z wewnętrznej biblioteki może skutkować wprowadzeniem ogromnej ilości zbędnego kodu do paczki aplikacji? Takie sytuacje są powszechne i często związane z nieprawidłowym działaniem tree-shakingu. Pewnie myślisz, że tego typu błąd łatwo można naprawić – wystarczy po prostu usunąć import z kodu. Masz rację, ale… dochodzenie, który import powoduje napuchnięcie bundle size, może zająć dużo czasu, szczególnie kiedy nie wiesz, który commit spowodował problem z bundle size.
Biorąc pod uwagę powyższe kwestie, powinieneś rozważyć jak najszybsze wprowadzenie kontroli bundle size w swoim projekcie – zaoszczędzi to w przyszłości wysiłków związanych z optymalizacją. Gwarantuję, że w przyszłości docenisz tą decyzję.
BundleMon – Narzędzie CI, Którego Potrzebujesz
Skoro już wiemy, dlaczego warto wprowadzić kontrolę rozmiaru bundle size, przyjrzyjmy się przykładowemu narzędziu do monitorowania rozmiaru paczek. BundleMon to narzędzie, które monitoruje rozmiar paczki przy każdym commicie oraz ostrzega o jego gwałtownych (często nieumyślnych) zmianach.
BundleMon oferuje wszystko, czego możesz potrzebować do monitorowania bundle size:
- Kontrole PR z wypisaną procentową zmianą końcowego rozmiaru bundle,
- Komentarze do PR z detalami odnośnie zmodyfikowanych plików w bundle,
- Ustalanie limitów rozmiaru paczki dla poszczególnych plików,
- Interaktywny wykres prezentujący historię bundle size w poszczególnych branchach.
Przewodnik po Funkcjach BundleMon
Przyjrzyjmy się szczegółowo funkcjonalnościom, które oferuje BundleMon.
Pull Request Checks
Mogą one blokować mergowanie pull requestów na podstawie procentowej zmiany całkowitej wielkości plików w bundle. Jest to przydatne, jeśli chcemy upewnić się, że nikt nieautoryzowany bez naszej zgody nie zmerguje PR powodującego niekontrolowane napuchnięcie paczki na naszym głównym branchu zawierającym kod produkcyjny.
Jak widać poniżej, kontrole PR zawierają różnice w rozmiarze między branchem pull requesta a głównym branchem (master/main). W tym przypadku jest to 14,83KB, co spowodowałoby wzrost końcowego rozmiaru paczki o 2,66% po zmergowaniu.
Komentarze do Pull Requestów
Kolejym świetnim ficzerem BundleMon’a są komentarze do pull requestów. Dostarczają one szczegółowych informacji o zmianach w końcowej paczce twojej aplikacji. W nich bardzo łatwo możesz zobaczyć, jakie pliki zostały dodane, zaktualizowane i usunięte z rozmiaru paczki.
Jak widać poniżej, komentarze zawierają informacje o zmianie rozmiaru konkretnych plików, które są zamieszczone tuż obok limitu rozmiaru pliku. Na dole każdego komentarza znajdziesz informacje o całkowitej zmianie plików w KB i %.
Wykresy Bundle Size
Najlepszą funkcjonalnością, która wyróżnia BundleMon’a na tle innych bibliotek na rynku, jest funkcja wykresów. Po kliknięciu w link Current branch size history lub Target branch size history zamieszczony w komentarzu do pull requesta zostaniesz przekierowany do z wykresu na stronie BundleMon.
Stamtąd już łatwo możesz zobaczyć, jak zmieniały się rozmiary poszczególnych plików w czasie oraz zobaczyć daty commitów, które wpłynęły na ich rozmiary. Takie informacje są bezcenne, zwłaszcza jeśli pracujesz nad optymalizacją rozmiaru bundle size.
Oto przykładowy link do wykresu bundle size NGXS – popularnej biblioteki do zarządzania stanem w Angularze.
Dodawanie BundleMon do Projektu
Proces dodawania BundleMon do projektu różni się w zależności od używanej platformy CI. Jeśli używasz GitHub Actions, postępuj zgodnie z tym przewodnikiem, a jeśli używasz CodeFresh, skorzystaj z tego przewodnika. Gdy skonfigurujesz akcję na platformie CI, możesz dodać konfigurację BundleMon do repozytorium swojego projektu.
Plik Konfiguracyjny BundleMon
Omówmy właściwości konfiguracji, które można zobaczyć w pliku konfiguracyjnym BundleMon:
- baseDir – to folder, w którym BundleMon powinien szukać plików wyjściowych. Dostosuj go tak, aby odzwierciedlał folder buildu twojego projektu.
- defaultCompression – definiuje kompresję, która powinna być używana podczas obliczania rozmiaru pliku. Możesz wybrać między "none", "gzip" lub "brotli". W moim przypadku ustawiłem "none", ponieważ chcę zobaczyć surowy rozmiar pliku.
- files – ta sekcja zawiera konfigurację plików, które chcesz śledzić na CI. Każdy konfig pliku zawiera „ścieżkę pliku”, „maksymalny rozmiar” i „maksymalny procentowy wzrost” na pull request. Możesz także skonfigurować alias, który będzie wyświetlany zamiast nazwy pliku. Możliwe jest również użycie wzorców regex do wybierania plików w zależności od patternu. Zobacz dokumentację, aby uzyskać więcej szczegółów.
- reportOutput – konfiguracja funkcji BundleMon. Tutaj możesz przełączać pull request checks, statusy commitów oraz komentarze do PR.
.bundlemonrc.json
{
"baseDir": "./dist/your-application-name/browser",
"defaultCompression": "none",
"files": [
{
"path": "index.html",
"maxSize": "80kb",
"maxPercentIncrease": 5
},
{
"path": "main.js",
"maxSize": "450kb",
"maxPercentIncrease": 5
},
{
"path": "styles.css",
"maxSize": "40kb",
"maxPercentIncrease": 5
},
{
"path": "feature-a.js",
"maxSize": "25kb",
"maxPercentIncrease": 10
},
{
"path": "feature-b.js",
"maxSize": "25kb",
"maxPercentIncrease": 10
}
],
"reportOutput": [
[
"github",
{
"checkRun": true,
"commitStatus": true,
"prComment": true
}
]
]
}Plik GitHub Action
Aby dostosować plik GitHub Action do projektu napisanego w Angularze, musisz wprowadzić tylko kilka zmian w stosunku do skryptu z dokumentacji. Zastąp skrypt yarn build z dokumentacji komendą build Angulara, uwzględniając dodatkowe flagi, które omówiłem w moim poprzednim artykule.
bundlemon.yml
name: Bundlemon
on:
push:
branches: [master]
pull_request:
types: [synchronize, opened, reopened]
permissions: write-all
jobs:
check-bundle-size:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js 20
uses: actions/setup-node@v2-beta
with:
node-version: '20.11.1'
- name: Install dependencies
run: npm ci
- name: Build
run: npx ng build --named-chunks=true --output-hashing=none --source-map=true
- name: BundleMon
uses: lironer/bundlemon-action@v1
Potencjalne Ograniczenia
Warto również zauważyć, że domyślnie BundleMon działa na darmowym serwerze udostępnionym przez autora biblioteki. Z tego powodu BundleMon ma pewne ograniczenia:
- zapisy utworzone przez pull requesty zostaną usunięte po 30 dniach,
- zapisy w branchach bez aktywności (nowych commitów) zostaną usunięte po 180 dniach,
- po 90 dniach będzie zachowany tylko najnowszy zapis z tego dnia.
Pamiętaj, że powyższe limity mogą ulec zmianie w przyszłości. Dobrą informacją jest to, że autor BundleMon umożliwia uruchomienie BundleMon na własnym serwerze – dzięki czemu możesz korzystać z narzędzia bez żadnych ograniczeń.
Podsumowanie
Jak widzisz, monitorowanie bundle size może łatwo zapobiec napuchnięciu paczki i potencjalnym pracom nad jej optymalizacją w dłuższej perspektywie. Pamiętaj, że BundleMon to tylko jedno z wielu rozwiązań do monitorowania rozmiaru paczki. Możesz również sprawdzić bundlesize, bundlewatch lub size-limit. Te rozwiązania też są dobre, ale nie są tak bogate w funkcjonalności jak BundleMon. Nie zapomnij również o skonfigurowaniu budżetów rozmiaru paczki dla swojej aplikacji w pliku angular.json.