Jak korzystać z dzielenia kodu Webpack w Vue.js

Od ośmiu miesięcy pracujemy z zespołem w Vue.js. Przez ten czas przetestowaliśmy różne techniki optymalizacji wydajności, aby poprawić UX naszej aplikacji. Pora podzielić się efektami!

Uwaga: możesz przeczytać ten artykuł bez wykonywania tutorialu. Kod jest dostępny do wglądu na Github.

Będziemy korzystać z prostego projektu wygenerowanego za pomocą vue-cli z szablonu webpack z zaledwie dwiema ścieżkami (Hello i Goodbye):

git clone https://github.com/PierreCavalet/vuejs-code-splitting.git
npm install

Będziemy rozmawiać o narzędziach do budowania projektów, więc będziesz potrzebować serwera HTTP do serwowania plików statycznych. Ja skorzystam z http-server, ale jeśli wolisz, możesz użyć dowolnego innego.

npm install -g http-server

Przy budowie dużych aplikacji pliki JavaScript potrafią osiągnąć spore rozmiary. Uderza to bezpośrednio w komfort użytkownika, bo im cięższy plik, tym dłużej trzeba czekać na załadowanie strony.

Najpierw musimy zrozumieć, jak powstaje produkcyjna wersja aplikacji.

npm run build

To polecenie generuje pliki, które są serwowane przez serwer HTTP. Oto ich struktura:

.
├── index.HASH.html
├── static/
│   └── css/
│   │   └── app.HASH.css
│   │   └── app.HASH.css.map
│   └── js/
│   │   └── app.HASH.js
│   │   └── app.HASH.js.map
│   │   └── manifest.HASH.js
│   │   └── manifest.HASH.js.map
│   │   └── vendor.HASH.js
│   │   └── vendor.HASH.js.map

Plik app.HASH.js zawiera kod aplikacji (bez zewnętrznych bibliotek, które znajdują się w vendor.HASH.js).

Do serwowania tych plików użyjemy narzędzia http-server.

http-server dist/

Domyślnie, http-server działa na porcie 8080. Swoją wersję produkcyjną aplikacji powinieneś zobaczyć tutaj.

Ja korzystam z Chrome, ale poniższe kroki możesz powtórzyć w niemal każdej przeglądarce. W narzędziach deweloperskich Chrome (DevTools) możesz podejrzeć ruch sieciowy w zakładce network:

Plik index.html zawiera tagi script oraz link które instruują przeglądarkę, aby pobrała powyższe pliki js i css.   

Dzielenie kodu pozwala na tworzenie tzw. chunków, które nie są pakowane bezpośrednio do głównego pliku  app.HASH.js. Zamiast tego, te fragmenty kodu są ładowane asynchronicznie dopiero wtedy, gdy są potrzebne. Technika ta jest niezwykle przydatna, gdy aplikacja staje się zbyt duża, by serwować ją w jednym pliku, lub gdy zawiera mnóstwo treści, z których użytkownik prawdopodobnie i tak nie skorzysta.

Wróćmy do naszego przykładu. Załóżmy, że nasz komponent Goodbye jest ogroooomny i musimy go wydzielić.

Webpack udostępnia funkcję code splitting, która pozwala na tworzenie chunków ładowanych na żądanie. Wykorzystamy do tego:

• funkcję dynamic import Webpack, aby wydzielić kod do osobnego chunka,
• funkcję Async Components, aby załadować komponent asynchronicznie.

Zmień zawartość pliku src/router/index.js na nową. 

I to wszystko. Zamiast standardowego importu, definiujemy Goodbay za pomocą funkcji strzałkowej, która zwraca promise (funkcja import zwraca promise). Zobaczmy teraz różnicę w aplikacji zbudowanej na produkcję.

Najpierw usuń stary build:

rm -rf dist/*

Następnie przebuduj aplikację:

npm run build

Zauważ, że w folderze wyjściowym pojawił się nowy plik JavaScript:

.
├── index.HASH.html
├── static/
│   └── css
│   │   └── app.HASH.css
│   │   └── app.HASH.css.map
│   └── js
│   │   └── app.HASH.js
│   │   └── app.HASH.js.map
│   │   └── 0.HASH.js
│   │   └── 0.HASH.js.map
│   │   └── manifest.HASH.js
│   │   └── manifest.HASH.js.map
│   │   └── vendor.HASH.js
│   │   └── vendor.HASH.js.map

Plik 0.HASH.js to o chunk zawierający komponent pożegnalny (goodbye).

Uruchom aplikację i porównaj ruch sieciowy.

Po załadowaniu aplikacji można zaobserwować następujący ruch sieciowy:

First we can note that the app is slightly lighter (-0.5 kb) because it does not contain the Goodbye component. Now if we click on the goodbye link, here is the network:

Chunk ładowany jest asynchronicznie. Tak właśnie działa dzielenie kodu. 

Wraz z rozwojem aplikacji będziesz mieć coraz więcej komponentów asynchronicznych. Wyobraź sobie proces wykorzystujący dwie ścieżki: /foo oraz /bar. Możesz zgrupować te dwa fragmenty w jeden, używając nazwanego chunka. Wypróbujmy to.

Najpierw musimy skonfigurować projekt z większą liczbą komponentów asynchronicznych:

git stash
git checkout multiple-async-components

Jeśli nie robisz tutorialu, możesz sprawdzić kod źródłowy w serwisie GitHub.

Usuń poprzednią wersję kompilacji (build) i ponownie zbuduj aplikację:

rm -rf dist/*
npm run build

Jak widać, istnieją 3 chunki (0, 1, 2).

Teraz użyjemy specjalnego parametru Webpacka: webpackChunkName.

Zmień plik src/router/index.js używając nowej treści.  

Teraz, jeśli ponownie zbudujesz aplikację, zobaczysz, że istnieją tylko dwa chunki:

• Jeden z komponentem Goodbye
• Jeden z komponentami Foo i Bar

Jeśli chcesz uzyskać więcej informacji na ten temat, możesz sprawdzić oficjalną dokumentację.