O tomto nástroji
Miniifikace JavaScriptu snižuje velikost zdrojového kódu odstraněním nepotřebných znaků a (s vhodnými minifikátory) přejmenováním lokálních proměnných na kratší názvy. První kategorie – odstranění mezer a komentářů – je přímočará a bez rizika. Druhé – přejmenování proměnných – vyžaduje pochopení pravidel rozsahu a je to, co produkční minifikátory jako Terser a esbuild umí nejlépe.
Tento nástroj se zaměřuje na bezpečnou minifikaci: odstranění komentářů, sbalení mezer, odstranění nadbytečných středníků a zkrácení zjevných vzorů. Přejmenování proměnných je konzervativní – dotýkají se pouze lokálních proměnných s jasnými rozsahy a názvy s externími odkazy jsou ponechány samotné. Výsledek je funkčně shodný se zdrojem.
Pro minifikaci na produkční úrovni, specializované nástroje (Terser, esbuild, swc) rozumí úplnému modelu rozsahu ECMAScript a produkují výrazně menší výstup. Tento nástroj slouží k rychlé minifikaci na straně prohlížeče, když není k dispozici úplné nastavení sestavení.
Proč minimalizovat JavaScript
Balíčky JavaScriptu jsou obvykle největším samostatným zdrojem na moderní webové stránce. Minifikace běžně produkuje 30–60% zmenšení velikosti v porovnání s neminifikovaným zdrojem. V kombinaci s gzip nebo Brotli se redukce poněkud zmenší, ale tato kombinace stále šetří měřitelné bajty - zejména pro uživatele s pomalým připojením.
Rychlejší JavaScript také znamená rychlejší dobu do interaktivity. Menší skripty se stahují rychleji, analyzují rychleji a spouštějí se dříve. U webů, kde TTI ovlivňuje míru okamžitého opuštění a hodnocení SEO, je minifikace jednou z nejlevnějších dostupných výher.
Technické detaily
Minifikátor tokenizuje JavaScript pomocí analyzátoru, který respektuje syntaxi ECMAScript. Komentáře (jednořádkové a víceřádkové) jsou odstraněny kromě licenčních komentářů označených /*! předpona. Bílé znaky jsou sbaleny kromě případů, kdy je to syntakticky vyžadováno (mezi identifikátory, za klíčovými slovy).
Konzervativní přejmenování proměnných zkracuje lokální proměnné v přímočarém rozsahu. Globální hodnoty, exporty a importované názvy se nepřejmenovávají – to by narušilo externí odkazy. Pro hluboké přejmenování použijte Terser nebo esbuild se správnou analýzou s ohledem na moduly.
Okrajové případy: automatické vkládání středníků (ASI) znamená, že minifikátor musí v některých kontextech zachovat nové řádky, aby se zabránilo změně chování programu. Literály šablony, literály regulárních výrazů a JSX (pokud je vstup obsahuje) jsou zachovány přesně, protože jejich obsah nemusí být bezpečný pro kompresi.
Často kladené dotazy
- Změní minifikace způsob, jakým můj kód funguje?
- Ne. Minifikace odstraňuje mezery a komentáře, které nemají vliv na provádění. Zkrácení proměnných (mangling) přejmenuje lokální proměnné, ale zachová chování. Globální proměnné a exportované názvy zůstávají nedotčeny.
- Mám minimalizovat ve vývoji nebo výrobě?
- Při výrobě používejte pouze minifikovaný kód. Během vývoje zachovejte původní čitelný kód. Většina nástrojů pro sestavení (Webpack, Vite, esbuild) zpracovává minifikaci automaticky jako součást procesu sestavení produkce.
- Jaký je rozdíl mezi minifikací a mlžením?
- Minifikace zmenšuje velikost a zároveň zachovává kód funkčně čitelný, pokud je formátován. Zatemnění záměrně znesnadňuje pochopení kódu (kódování řetězců, zploštění toku řízení). Tento nástroj se zaměřuje na zmenšení velikosti, nikoli na zamlžování.
- Jak velké zmenšení velikosti mám očekávat?
- Typicky 30-60% před gzip. Dobře okomentovaný kód s dlouhými názvy proměnných vidí největší snížení. V kombinaci s kompresí gzip jsou soubory JavaScriptu často o 80–90 % menší než původní zdroj.
- Je můj kód nahrán na server?
- Ne. Minifikátor běží ve vašem prohlížeči.
- O kolik menší bude můj JavaScript?
- Obvykle 30-60% snížení. Variabilní kód s dlouhými identifikátory se více komprimuje; výrazově náročný kód komprimuje méně.
- Mám minifikovat ručně?
- Nikdy. Udržujte čitelný JavaScript ve zdroji. Spusťte minifikaci jako krok sestavení nebo jako součást nasazení.
- Funguje to na TypeScript?
- TypeScript je třeba nejprve zkompilovat do JavaScriptu pomocí tsc nebo esbuild. Po zkompilování lze výsledný JavaScript minifikovat.