Ha valaki régóta foglalkozik webfejlesztéssel, konkrétabban JavaScript alapú alkalmazás fejlesztéssel, bizonyára ismerős számára a probléma: túl nagy a JavaScript kódbázis, a különböző pluginek függnek egymástól. Hogyan tudnánk betölteni úgy a scripteket, hogy a lehető leghatékonyabb legyen számunkra és a függőségekkel se legyen gondunk? Nem kell kétségbeesni, mert van rá megoldás, méghozzá a Webpack.

Mi is az a Webpack?

A Webpack egy module bundler a JavaScript fájlok számára. A különböző állományokból (JavaScript-ek, Stíluslapok, Képek) – amelyek függnek egymástól – statikus állományokat hoz létre. A feltelepített NPM csomagokat is amelyekre szükség van beépíti a végső bundle-be. Segítségével elkerülhetjük a duplikációt, hiszen figyeli, hogy egy csomagot betöltöttünk-e már vagy még nem. A nem használt JS és CSS kódokat is képes kezelni, ezáltal egy kisebb kódot generál számunkra.

Miért van szükségünk erre?

Eddig a webes tartalom megjelenítés úgy nézett ki, hogy a böngésző kérést küldött a szervernek, majd válaszban megkaptuk a HTML tartalmat és azt a böngésző megjelenítette. Ezt a folyamatot szerver oldali renderelésnek hívjuk (Server Side Rendering). A probléma ezzel csak annyi, hogy minden aloldalnál, ugyanezt hajtjuk végre, szerver kérés, majd válasz és ugye tudjuk jól, hogy sok tényező befolyásolja a szerver és a böngésző közötti kapcsolatot.

Ilyenek például:

• az internet sebessége
• a szerver távolsága
• hányan böngészik az adott oldalt
• mennyire optimalizált a weboldal

Persze vannak technikák, amivel tudunk javítani az SSR-en. Cachelhetjük a HTML tartalmat. Használhatunk lazy loading-ot, tömöríthetünk a forrás fájlokon, vagy a CDN is segíthet, viszont van egy nagy kihívója a szerver oldali renderelésnek, méghozzá a kliens oldali renderelés.

Amikor fejlesztői körökben kliens oldali renderelésről (Client Side Rendering) beszélünk, akkor az azt jelenti, hogy a renderelést JavaScript végzi, méghozzá a böngésző segítségével. A gyakorlatban ez úgy néz ki, hogy a szervertől csak egy minimális HTML fájlt kapunk, amiben csak a stíluslapok és maga a JavaScript állományok szerepelnek. Ahogy a HTML-t a böngésző megkapja, onnantól kezdve a renderelés az ő feladata, amikor az egyik oldalról a másikra kattintunk, nem látunk oldal betöltődést. Ez az új szemlélet azért is terjedt el az utóbbi években, mert a kliens számítógépek, illetve a böngészők teljesítményének növekedése lehetővé tette, hogy ezt az erőforrás igényes feladatot, könnyebben elvégezzék.

És itt jön a képbe a Webpack: mivel a teljes weboldalunk renderelését és magát a megjelenítési logikát JavaScript-ek segítségével oldjuk meg, a JS kódbázis megnő, sokkal nagyobb állományra van szükség, mint egy SSR folyamat során. Ahhoz, hogy a JavaScriptek optimálisak legyenek, tömörítsük őket, ehhez a különböző komponenseket és plugineket Webpack kompatibilis módon, modulárisan kell kialakítanunk.

Hogyan kezdjünk hozzá?

Mivel a Webpack egy Node JS alapú csomag, ezért szükségünk van Node JS-re, illetve telepítsük fel az NPM-et is a gépünkre. A cikk megírásához a Node 8.9.1-es, az NPM 5.5.1-es verzióját használtam. Ellenőrizzük le a verziókat a -v módosítóval:



Ha megbizonyosodtunk róla, hogy a megfelelő verzió van telepítve, hozzuk létre a projekt mappánkat, majd lépjünk bele és adjuk ki az npm init parancsot. Ezzel inicializáljuk a projektünket. Az alap beállítás valahogy így fog kinézni:


Miután lefutott az npm init, létrejön a projekt mappájában a package.json fájl. Most telepítsük fel a Webpack csomagot a következő paranccsal: npm i webpack --save-dev
Sikeres telepítés után létre kell hoznunk a Webpack-hez szükséges konfigurációkat tartalmazó fájlt a gyökér könyvtárban webpack.config.js néven.

Ebben a világban a Hello World projektünk egy összeadó függvény és annak meghívása lesz a feladat. Hozzunk létre a forrás fájloknak az src mappát és benne a következő két fájlt: A sum.js -ben megírt sum függvény két paramétert vár el, majd visszatérési értékben a két megkapott paramétert összeadja. A Node JS modele exports függvényének segítségével adjuk át az index.js-nek a függvényt, ahol a require kulcsszóval tudjuk meghívni. A példa kedvéért a total változónak értékül adjuk a sum függvény visszatérési értékét, majd a végeredményt a konzolra íratjuk. Mielőtt még a Webpack-kel feldolgoznánk a JS fájlokat, kipróbálhatjuk a parancssorban a node index.js paranccsal, hogy megkapjuk-e a jó eredményt.

A létrehozott webpack.config.js fájl a következőképp nézzen ki: A fájlnak tartalmaznia kell egy config objektumot, aminek két alapvető tulajdonságot kell megadni. Az egyik az entry, amivel azt jelezzük a Webpack-nek, hogy mi lesz a belépési pontunk. A mi esetünkben, az src mappában található index.js, viszont a kiterjesztést el is hagyhatjuk. Az output értékével pedig azt adjuk meg, hogy hova generálja a kimenetet. Ehhez szükséges megadni a path-t, vagyis az útvonalat, ehhez a Node path könyvtárát használjuk. A kimeneti könyvtár a dist lesz, vagyis distribution, ez az általános szabvány, amit használnak, de lehet prod vagy web is. Meg kell adni még a kimeneti fájl nevét, amit bundle.js-nek neveztünk el, ha már module bundler-ről van szó.

Ha parancssorban meghívjuk a webpack parancsot, az csak akkor fog működni, ha a csomagot globálisan a -g opcióval telepítettük, de mivel a projektünknek a Webpack egy függőssége és bekerül a package.json-ba a fejlesztői környezetbeli függőségekhez, ezért nyissuk meg a package.json-t és a scripts részhez vegyük fel a build-et, a következőképpen: Most már kipróbálhatjuk az npm run build paranccsal, hogy működik-e megfelelően a generálás. Ha minden rendben volt létrejön a dist mappában a bundle.js fájl és a következő kimenetet kapjuk:



Nézzük meg mit is jelent ez a kimenet. 55 ms alatt sikerült létrehozni a bundle.js-t aminek a mérete 2.72 kilobyte, ami látható, hogy jóval nagyobb, mint az index.js és a sum.js együttvéve. Vajon miért lehet ez? Az oka könnyen kideríthető. Ha megnyitjuk a bundle.js-t, látjuk, hogy a mi kis egyszerű 10 soros JavaScript kódunkból közel 100 soros bonyolult kód lett. Ne ijedjünk meg, nézzük meg mi van a motorháztető alatt egy egyszerűsített változaton: A Webpack gyakorlatilag egy tömbbe gyűjti össze a különböző modulokat, amint látható a fenti fájlon a myModules tömb tartalmaz két függvényt, az egyik a sum.js fájlunk tartalma, a másik pedig az index.js. A 8. sorban látható hogy a myModules tömb 0. elemét adjuk meg a sum változónak, így tudja lekezelni a különböző függőségeket, ami viszont még fontos lépés, hogy a belépési pontot is meg kell határoznia. Ezt a 15. sorban látható módon éri el. Így már nem is olyan bonyolult az, amit a Webpack csinál a bundle.js-ben, ugye?

Összegzés

Ahogy láthattuk a Webpack nagy segítség egy frontend fejlesztő számára, hiszen megoldja azt a problémát, hogy a modulokat milyen sorrendben töltsük be és lekezeli a függőségeket is.

Ha már valamelyik népszerű Frontend keretrendszert ismerjük és használjuk, érdemes megpróbálni mennyire nagyszerű segítség a Webpack ezeknél a projekteknél. A népszerű framework-ökhöz, mint például Angular, React, Vue, már léteznek CLI eszközök, amiket Webpack alapra helyeztek és kihasználták az általa nyújtott lehetőségeket.

Úgy gondolom a kliens oldali rendereléssel eljött az ideje, hogy mindenki JavaScript-re váltson és ehhez elengedhetetlen a Webpack használata. Hamarosan újabb cikkel jelentkezünk a témában, ezért kövess minket!