02

Proč je minifikace JavaScriptu dobrá pro váš web

Kategorie

  • JavaScript

Tagy

  • JavaScript
  • Tipy
  • Best practices

Minifikace JavaScriptu

Každý už se určitě setkal s nějakým JavaScriptovým souborem, který vypadal např. následovně: jquery.min.js. Ne každý se, ale možná zamyslel, proč jsou šířeny zdrojové kódy cizích knihoven a různých doplňků tímto způsobem.

Proč vlastně minifikovat

Účelem minifikace je optimalizovat velikost výsledného souboru obsahujícího zdrojový kód. Jedná se tedy o snahu uložit zdrojový kód v co nejmenší možné podobě, samozřejmě při zachování plné funkčnosti.

Velikost souborů se zdrojovým kódem obvykle není nikterak zásadní a tak vyvstává otázka, proč bychom je chtěli ještě zmenšovat.

Minifikace přichází na scénu především u rozsáhlých zdrojových kódů, kde může skutečně znamenat výraznou úsporu. Z tabulky v článku Jakuba Vrány(odkaz). Můžeme například vidět, že např. nástroj Google Closure Compiler (návod pro práci s tímto programem jsem popsal zde) zmenší soubor s knihovnou jQuery takřka na polovinu. Zmenšení u méně rozsáhlých zdrojových kódů je samozřejmě nižší.

Bez minifikace by stažení knihovny jQuery do prohlížeče uživatele trvalo podstatně déle a celá stránka by se zpracovala a správně zobrazila uživateli později. Důvod je tedy jasný. U rychlého připojení k internetu je tento rozdíl minimální, ale dnes musíme především myslet na uživatele mobilního internetu, kterých neustále přibývá a jsou to obvykle ti neuspěchanější a nejtrpělivější uživatelé. Nechceme přece přijít o neustále rostoucí skupinu uživatelů, již dnes zaujímající minimálně třetinu trhu.

Jak dobře využít potenciál minifikace

Minifikované jQuery a další cizí JavaScriptové doplňky už asi používáte, ale proč byste měli vy samy něco minifikovat u vlastních malých souborů?

Minifikace se hodí ve chvíli, kdy máte web nebo webovou aplikaci hotovou, schválenou klientem a patřičně otestovanou. V této chvíli, když už nepředpokládáte velké úpravy zdrojových souborů, je dobré udělat závěrečnou optimalizaci zdrojových souborů před nahráním na ostrý server.

Pokud chcete optimalizovat rychlost načítání vašeho webu na mobilních zařízeních a to jistě chcete. Setkáte se s mimo jiné s těmito dvěma problémy.

První bod je jasný. Druhý bod je podle mě trošku opomíjený. Každý požadavek browseru na stažení souboru ze serveru, je zvláště na mobilním internetu citelná ztráta rychlosti.

Proto se nám výborně hodí sloučit pokud možno všechny zdrojové JavaScriptové soubory, které jsme si samy napsali do jednoho. Tím můžeme v některých případech výrazně snížit počet dotazů na server.

Eliminací druhého problému, se ale můžeme dostat zase do prvního – výsledný soubor je příliš velký. A zde přichází na scénu minifikace. Výsledný sloučený soubor zminifikujeme a vyřešíme tak oba problémy. U rozsáhlejších aplikací využívajících hodně vlastního JavaScriptu může tato optimalizace pomoci zrychlit chod aplikace nejen na pomalém mobilním internetu.