Minifikovat JavaScript _

Jak funguje minifikace JavaScriptu

Terser pracuje ve čtyřech fázích nad Abstract Syntax Tree vašeho kódu. Každá fáze je nezávislá, takže můžete kteroukoli zapnout nebo vypnout, aniž byste ovlivnili ostatní.

1. Parsování. Terser parsuje váš JavaScript do AST. Jakákoli syntaktická chyba se objeví zde s tokenem a řádkem, který ji způsobil, takže najdete skutečný problém před spuštěním jakékoli transformace. Parser přijímá všechny standardní ECMAScript konstrukce až po nejnovější stage-4 návrhy.
2. Komprese. Kompresor prochází AST a aplikuje desítky transformací zachovávajících sémantiku: konstantní folding, eliminace mrtvých větví, inlining krátkých čistých funkcí, slučování sekvenčních deklarací var a přepisování ekvivalentních forem příkazů (if/else na ternární, zkracování porovnávacích řetězců, collapsing podmíněných returnů). Každá transformace je v principu reverzibilní; kompresor nikdy nemění pozorovatelné chování.
3. Mangle. Mangler přejmenovává lokální vazby na nejkratší unikátní identifikátory (a, b, c, …) v rámci každého scope. Přejmenovány jsou pouze názvy, které nemohou uniknout z hranic modulu, takže exportované vazby, klíče vlastností a globální reference přežívají nedotčeny. Výsledkem je největší úspora bajtů z kterékoliv fáze.
4. Vykreslení. Terser vytiskne transformované AST zpět do JavaScriptového řetězce s minimalizovanými bílými znaky a oddělovači příkazů zredukovanými na minimum, které gramatika akceptuje. Komentáře jsou odstraněny, pokud přepínač zachování licence neuchovává bloky /*! … */, které většina CDN licencí vyžaduje zachovat.

Proč minifikovat JavaScript

• Rychlejší načítání stránek. Menší skripty se parsují a vykonávají dříve. Na 4G mobilním připojení ušetří 40procentní snížení bajtů reálné vteřiny z Time to Interactive, což je metrika, kterou Google PageSpeed Insights měří nejagresivněji.
• Nižší účty za CDN egress. CloudFront, Cloudflare a Fastly účtují za gigabajt egressu. 40procentní snížení skriptů napříč miliony měsíčních zobrazení stránek se skládá do reálných úspor před tím, než se vůbec začne řešit obrázky nebo CSS. Matematika platí i po gzip a brotli — minifikace odstraňuje tokeny, které by kompresor jinak musel kódovat.
• Tento minifikátor nezatěžuje vaši stránku. Terser má ~1 MB nekomprimovaný. Většina online minifikátorů dodává celou knihovnu při načtení stránky, což ničí vlastní Lighthouse skóre a stránka působí pomalu ještě před tím, než uživatel cokoli napíše. Tato stránka lazy-načítá Terser pouze při kliknutí na Minifikovat nebo při zapnutí Živého režimu — takže počáteční vykreslení zůstává pod prahy Core Web Vitals, které nástroj sám slibuje pomoci dosáhnout.
• Dosažení Core Web Vitals. Lighthouse a PageSpeed Insights flagují velký JavaScript jako přímého přispěvatele ke špatnému Total Blocking Time. Minifikace vendor knihoven a aplikovaných balíčků je nejrychlejší výhra na Lighthouse auditech "Redukce nepoužitého JavaScriptu" a "Odstranění duplicitních modulů" — obvykle jednorázové snížení o deset nebo dvacet bodů.

Běžná použití

Minifikace JavaScriptu se objevuje téměř v každé fázi moderního webového projektu.

• Pre-commit hooks: minifikujte jednotlivé utility skripty před commitnutím do repozitáře, takže committed artifact je připraven k produkci a diff ukazuje logické změny místo šumu z bílých znaků.
• Audity widgetů třetích stran: vložte embed snippet dodavatele a zkontrolujte, zda je již minifikován nebo zda může být dále zmenšen před doručením milionům uživatelů.
• Čištění legacy skriptů: komprimujte staré jQuery pluginy a ručně psané skripty, které předcházejí vašemu současnému build pipeline, aniž byste se dotkli zdrojového stromu.

Příklad

Vezměte malou funkci: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — asi 130 bajtů včetně komentáře. Vložte ji výše s Mangle i Kompresí zapnutými. Výstup se zkrátí zhruba na function add(n,o){return n+o}console.log(add(1,2)); — asi 55 bajtů, 58procentní snížení. Název funkce add přežije, protože je referencován ve volání console.log; názvy parametrů firstNumber a secondNumber se zkrátí na jednotlivá písmena, protože jsou lokální v těle funkce. Vypněte Mangle pro zachování čitelných názvů parametrů při současném sbalení bílých znaků a odstranění komentáře.

FAQ

Běží to v mém prohlížeči?

Ano. Terser je lazy-načten při prvním kliknutí na Minifikovat nebo při zapnutí Živého režimu — asi 200 KB komprimovaných dopadne do cache prohlížeče, pak se nic dalšího nestahuje. Váš kód nikdy neopouští stránku.

Co je name mangling a je bezpečný?

Mangling přejmenovává lokální proměnné na jednotlivá písmena pro úsporu bajtů. Je bezpečný pro samostatné skripty a IIFE balíčky, protože přejmenování nikdy neopouští scope. NENÍ bezpečný pro skripty, které vystavují globální proměnné jménem (např. window.myLib = …) bez wrapperu. Když si nejste jisti, vypněte Mangle.

Proč se můj kód po minifikaci rozbil?

Tři obvyklí podezřelí: eval nebo with odkazující na proměnné řetězcem; čtení Function.name nebo arguments.callee, která závisí na původním identifikátoru; nebo globální proměnné vystavené jménem, které bylo přejmenováno. Nejprve vypněte Mangle, abyste izolovali, zda je příčinou přejmenování nebo transformace Compress.

Podporuje to moderní syntaxi (ES2020+)?

Ano. Nastavte ECMAScript cíl na ES2020 nebo Next a Terser zachovává optional chaining, nullish coalescing, top-level await a logické přiřazovací operátory. Nastavte na ES5 a Terser down-kompiluje, kde může, ale není to plný transpiler — použijte Babel pro syntaxi, kterou ES5 vůbec nedokáže reprezentovat.

Minifikace JavaScriptu na straně prohlížeče s Terser vám dává produkční kvalitu výstupu bez přidávání build nástroje. Vložte skript, vyberte ECMAScript cíl, zkopírujte nebo stáhněte výsledek. Nic se nenahrává, žádný účet, žádný build pipeline. Minifikátor se načítá pouze na vyžádání — takže otevření této stránky stojí pár kilobajtů, ne megabajt.