Prečo vznikol webpack?

Nikto nemá rád pomalé weby. Už odozva nad 400ms dokáže niektorých používateľov odradiť od používania vašej stránky. Preto je veľmi dôležité klásť na rýchlosť načítania ale taktiež aj výkon na strane klienta veľký dôraz. Ak niekoho problematika rýchlosti zaujíma hlbšie, odporúčam mu prečítať si tento článok: http://designingforperformance.com/performance-is-ux/.

Ako teda vylepšiť odozvu a rýchlosť?

Základom na tvorbu webov s minimálnou odozvou, je porozumieť tomu, ako vlastne prehliadač pracuje. Konkrétne sa jedná o načítavanie skriptov, štýlov, rôznych knižníc ale aj médií. Väčšina z vás už zrejme používa rôzne minifikátory a programy na optimalizáciu veľkosti obrázkov. Je však toto až tak poznať na rýchlosti? Určite je. Ak používate napríklad mobilný telefón s pomalým dátovým pripojením, veľkosť jednotlivých súborov je kritická a každý byte je drahocenný. Existuje však ešte jedno riešenie, ktoré môže byť pri weboch s množstvom obsahu ešte účinnejšie ako minifikácia súborov, a tým je webpack.

Princíp fungovania

Nie je jedno, či prehliadač načítava 2 súbory alebo 30 súborov. Prehliadač musí každý jeden súbor načítavať vo väčšine prípadov zvlášť. To znamená, že sa pre každý súbor musí pripojiť k serveru, vyžiadať si od neho obsah a počkať kým na načíta. Toto všetko sa nedeje asynchrónne ale postupne. Môže sa preto stať, že pri veľkej odozve servera alebo odozve na strane pripojenia klienta bude stránke načítavanie trvať doslova večnosť. Ak však minimalizujeme počet potrebných pripojení na server, dokážeme čas načítania vo väčšine prípadov výrazne znížiť. A tu prichádza na rad webpack. Ten nám pomôže spojiť všetky súbory, ktoré by sme inak načítavali postupne, do jedného alebo viacerých veľkých.

Ako funguje webpack?

V budúcej časti sa pozrieme na základy práce s webpackom.