Analiza plików generowanych przez webpack

Dziś krótko ale treściwie! W dzisiejszych czasach używanie webpacka staje się już prawie standardem. Nic dziwnego… oferuje on przecież duże możliwości łączenia modułów wykorzystywanych przez naszą aplikację, dzielenia ich na mniejsze paczki (bundle) itd. Zdarza się jednak, że nie zawsze jesteśmy do końca zadowoleni z rozmiaru plików przez niego generowanych. Na szczęście istnieją narzędzia, które potrafią nam trochę pomóc. Postanowiłem przedstawić dziś jedno z nich, którego zadaniem jest analiza plików generowanych przez webpack pod kątem miejsca jakie zajmują. W końcu im mniej danych przesyłanych przez serwer do przeglądarki tym lepiej dla szybkości ładowania strony, prawda?

Analiza plików generowanych przez webpack

Bohaterem dzisiejszego wpisu jest plugin webpacka o wdzięcznej i wiele mówiącej nazwie webpack-bundle-analyzer. Za chwilę przekonasz się, że jego użycie w projekcie jest dziecinnie proste!

Instalacja i konfiguracja

Najpierw jednak należy go zainstalować w naszym projekcie. Robimy to standardowo, jak każdy inny moduł npm:

npm install --save-dev webpack-bundle-analyzer

Jeśli zamiast npm wolisz używać yarn (co zdecydowanie polecam) to zamiast powyższego wywołaj:

yarn add --dev webpack-bundle-analyzer

Kolejna rzecz to dodanie pluginu do konfiguracji webpacka (zwykle w pliku webpack.config.js):

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
  // ...
}

W ten sposób włączamy plugin z domyślnymi ustawieniami - najważniejsze z nich to uruchomienie pluginu w trybie serwera, pod adresem 127.0.0.1 i porcie 8888. Oznacza to, że po uruchomieniu komendy webpack zostanie uruchomiony lokalny serwer z wynikami analizy. Warto więc użycie tego pluginu uwarunkować za pomocą odpowiedniego parametru wywołania komendy (można do tego użyć na przykład biblioteki yargs). Warto też zadbać o to, aby analizy dokonywać na produkcyjnej wersji bundli - dzięki temu będziemy mogli sprawdzić jak wygląda struktura wynikowych plików webpacka, która później wysyłana jest do przeglądarki użytkownika.

Oczywiście możemy dowolnie zmieniać parametry pluginu webpack-bundle-analyzer. Wystarczy przekazać do niego obiekt zawierający odpowiednie właściwości - ich listę znajdziesz w dokumentacji projektu na GitHubie.

Jak to działa?

Ok, skoro plugin mamy już zainstalowany i skonfigurowany… czas go użyć. Na potrzeby wpisu przyjmijmy, że po prostu dodaliśmy plugin do konfiguracji webpacka (bez parametryzowania ani zmiany domyślnych ustawień). Teraz, po uruchomieniu komendy webpack zostanie przeprowadzona analiza plików generowanych przez webpack, a następnie uruchomiony zostanie lokalny serwer (http://127.0.0.1:8888) i naszym oczom ukaże się widok podobny do poniższego:

Jak widzisz, jest to przedstawione w graficzny sposób zestawienie wszystkich modułów zawartych w poszczególnych bundlach projektu. Po najechaniu na dany element, możemy zobaczyć więcej szczegółów na temat danego modułu:

Dzięki przedstawieniu graficznemu od razu widać, które moduły są szczególnie duże i warto im się przyjrzeć bliżej. Na powyższym screenie widać na przykład, że pewnie warto popracować trochę nad wykorzystaniem biblioteki RxJS.

Oczywiście, każdy przypadek jest inny więc nie będę tutaj teraz przedstawiać jak poradzić sobie z poszczególnymi problemami. Jako “hint” napiszę tylko, że w przypadku wielu bibliotek, często zamiast ładować całość, możemy importować do naszych modułów tylko pojedyncze, potrzebne nam funkcje. Tak jest na przykład w przypadku biblioteki lodash… ale w tym przypadku mamy też akurat dostępne specjalne pluginy webpacka, które mogą zrobić to za nas. To samo można też zrobić w przypadku wspomnianej przed chwilą biblioteki RxJS.

W ogóle temat optymalizacji rozmiaru plików generowanych przez webpack to materiał na osobny wpis. Postaram się napisać coś więcej na ten temat w najbliższym czasie!

Podsumowanie

To tyle na dziś. Jak widać analiza plików generowanych przez webpack jest bardzo prosta dzięki wtyczce webpack-bundle-analyzer. Myślę, że warto wyposażyć w nią swój projekt - zysk ze zmniejszenia wielkości “bundli” może być spory i znacznie wpłynąć na szybkość ładowania strony przez przeglądarkę!