O tomto nástroji
Minifikácia JavaScriptu znižuje veľkosť zdrojového kódu odstránením nepotrebných znakov a (s vhodnými minifikátormi) premenovaním lokálnych premenných na kratšie názvy. Prvá kategória – odstraňovanie medzier a komentárov – je jednoduchá a bez rizika. Druhé – premenovanie premenných – vyžaduje pochopenie pravidiel rozsahu a je to, čo produkčné minifikátory ako Terser a esbuild robia najlepšie.
Tento nástroj sa zameriava na bezpečnú minifikáciu: odstraňovanie komentárov, zbaľovanie medzier, odstraňovanie nadbytočných bodkočiarok a skracovanie zjavných vzorov. Premenovanie premenných je konzervatívne – dotýkajú sa iba miestnych premenných v jasných rozsahoch a názvy s externými odkazmi sa nechajú osamotené. Výsledok je funkčne zhodný so zdrojom.
Pre minifikáciu na produkčnej úrovni vyhradené nástroje (Terser, esbuild, swc) rozumejú úplnému modelu rozsahu ECMAScript a produkujú výrazne menší výstup. Tento nástroj slúži na rýchlu minifikáciu na strane prehliadača, keď nie je k dispozícii úplné nastavenie zostavy.
Prečo minimalizovať JavaScript
Balíky JavaScriptu sú zvyčajne najväčším samostatným zdrojom na modernej webovej stránke. Minifikácia bežne prináša 30–60 % zmenšenie veľkosti v porovnaní s neminifikovaným zdrojom. V kombinácii s gzip alebo Brotli sa redukcia trochu zmenšuje, ale táto kombinácia stále šetrí merateľné bajty - najmä pre používateľov s pomalým pripojením.
Rýchlejší JavaScript znamená aj rýchlejší čas do interakcie. Menšie skripty sa sťahujú rýchlejšie, analyzujú rýchlejšie a vykonávajú sa skôr. Pre stránky, kde TTI ovplyvňuje mieru odchodov a hodnotenie SEO, je minifikácia jednou z najlacnejších dostupných výhier.
Technické detaily
Minifikátor tokenizuje JavaScript pomocou analyzátora, ktorý rešpektuje syntax ECMAScript. Komentáre (jednoriadkové a viacriadkové) sa odstránia okrem licenčných komentárov označených /*! predpona. Medzery sú zbalené okrem prípadov, keď sa to vyžaduje syntakticky (medzi identifikátormi za kľúčovými slovami).
Konzervatívne premenovanie premenných skracuje lokálne premenné v priamom rozsahu. Globálne názvy, exporty a importované názvy sa nepremenujú – to by porušilo externé odkazy. Na hlboké premenovanie použite Terser alebo esbuild so správnou analýzou modulov.
Okrajové prípady: automatické vkladanie bodkočiarky (ASI) znamená, že minifikátor musí v niektorých kontextoch zachovať nové riadky, aby sa zabránilo zmene správania programu. Literály šablóny, literály regulárneho výrazu a JSX (ak ich vstup obsahuje) sa zachovajú presne, pretože ich obsah nemusí byť bezpečný na kompresiu.
Často kladené otázky
- Mení minifikácia spôsob, akým funguje môj kód?
- Nie. Minifikáciou sa odstránia medzery a komentáre, ktoré nemajú vplyv na vykonanie. Skrátenie premenných (mangling) premenuje lokálne premenné, ale zachová správanie. Globálne premenné a exportované názvy zostanú nedotknuté.
- Mám minimalizovať vo vývoji alebo vo výrobe?
- Pri výrobe používajte iba miniifikovaný kód. Počas vývoja si ponechajte pôvodný čitateľný kód. Väčšina nástrojov na zostavovanie (Webpack, Vite, esbuild) spracováva minifikáciu automaticky ako súčasť procesu zostavovania produkcie.
- Aký je rozdiel medzi minifikáciou a zahmlievaním?
- Minifikácia zmenšuje veľkosť a zároveň zachováva kód funkčne čitateľný, ak je naformátovaný. Zahmlievanie úmyselne sťažuje pochopenie kódu (kódovanie reťazcov, sploštenie toku riadenia). Tento nástroj sa zameriava na zmenšenie veľkosti, nie na zahmlievanie.
- Aké zmenšenie veľkosti mám očakávať?
- Pred gzipom zvyčajne 30 – 60 %. Najväčšie redukcie vidí dobre komentovaný kód s dlhými názvami premenných. V kombinácii s kompresiou gzip sú súbory JavaScriptu často o 80 – 90 % menšie ako pôvodný zdroj.
- Je môj kód nahraný na server?
- Nie. Minifikátor beží vo vašom prehliadači.
- O koľko menší bude môj JavaScript?
- Zvyčajne 30-60% zníženie. Variabilný kód s dlhými identifikátormi sa viac komprimuje; výrazovo náročný kód komprimuje menej.
- Mám minifikovať ručne?
- Nikdy. Udržujte čitateľný JavaScript v zdroji. Spustite minifikáciu ako krok zostavenia alebo ako súčasť nasadenia.
- Funguje to na TypeScript?
- TypeScript je potrebné najskôr skompilovať do JavaScriptu pomocou tsc alebo esbuild. Po kompilácii je možné výsledný JavaScript minimalizovať.