28 Maj 2019

Dynamiczne ładowanie plików JavaScript

Większość użytkowników ma określony cel przeglądając witrynę. Na przykład jeden użytkownik może chcieć przeglądać katalog produktów tylko po to, aby zobaczyć, co masz w sklepie. Nie jest mu potrzebny kod js w zakładce „pokaż recenzje” bo tam po prostu nie trafi. Więc serwowanie kodu z całej witryny mija się z celem.

Jeżeli chcesz tworzyć szybkie witryny, musisz przesłać jak najmniej JavaScript do przeglądarek. Pobieranie pakietu JavaScript wymaga nie tylko czasu, ale przeglądarka musi także wyodrębnić kod i przeanalizować go, co również zajmuje dużo czasu.

Powolne działanie witryny sprawia, że użytkownicy odchodzą, optymalny czas ładowania strony to maksymalnie 2-3s. Takie podejście serwowania kodu w małych paczkach jest również dobre dla SEO – Google bardzo lubi szybkie strony ;).

To co powinieneś zrobić, to wysłać tyko JavaScript, którego użytkownik potrzebuje do przeglądania i interakcji z odwiedzanymi stronami. W ten sposób witryna ładuje się znacznie szybciej.

Takie ładowanie możemy przygotować za pomocą webpacka i dynamicznego ładowania.

Gdy korzystasz z importu dynamicznego, wstawiasz minimalną ilość javascirpt na stronie i ładujesz resztę dynamicznie, gdy i jeśli użytkownik tego potrzebuje.

Nasz przykład będzie bardzo prosty, na środku strony będzie znajdował się przycisk po kliknięciu którego zmienimy kolor tła strony. Kliknięcie spowoduje załadowanie pliku js który to właśnie zmieni nam to tło.

Jak skonfigurować dynamiczny import pakietów internetowych w webpack

Zacznijmy od webpacka. Mam nadzieję że wiesz jak instalować pakiety npm?. Masz zainstalowane node?. Jeśli nie, no cóż, może kiedyś powstanie jakiś artykuł. Na obecną chwilę polecam [ artykuł ].

Inicjalizacja projektu. Ja używam yarn, oczywiście nic nie stoi na przeszkodzie użycie npm.

yarn init -y