JavaScript tömörítése _

Hogyan működik a JavaScript tömörítés

A Terser négy szakaszban dolgozik a kód Absztrakt Szintfáján. Minden szakasz független, így bármelyiket be- vagy kikapcsolhatod anélkül, hogy a többit megtörnéd.

1. Értelmezés. A Terser elemzi a JavaScripted egy AST-vé. Bármilyen szintaktikai hiba itt bukkan elő a tokennel és sorral, ami okozta, így megtalálod a valódi problémát, mielőtt bármilyen transzformáció futna. Az elemző elfogad minden szabványos ECMAScript konstrukciót a legújabb stage-4 javaslatokig.
2. Tömörítés. A tömörítő bejárja az AST-t és több tucat szemantikamegőrző transzformációt alkalmaz: konstans összevonás, holt ág eltávolítás, rövid tiszta függvények beillesztése, szekvenciális var deklarációk összevonása, és egyenértékű utasításformák átírása (if/else ternér operátorokba, összehasonlítási lánc rövidítés, feltételes visszatérés összevonása). Minden transzformáció elvileg visszafordítható; a tömörítő soha nem változtatja meg a megfigyelhető viselkedést.
3. Névösszevonás. A névösszevonó átnevezi a lokális kötéseket a legrövidebb egyedi azonosítókra (a, b, c, …) minden hatókörön belül. Csak azok a nevek kerülnek átnevezésre, amelyek nem léphetik át a modul határát, így az exportált kötések, tulajdonságkulcsok és globális referenciák érintetlenül maradnak. Az eredmény a legnagyobb egyetlen bájt megtakarítás bármely szakasz közül.
4. Renderelés. A Terser kiírja a transzformált AST-t vissza egy JavaScript karakterláncba összevont szóközökkel és a nyelvtan által elfogadott minimális utasításelválasztókkal. A megjegyzések eltávolításra kerülnek, kivéve ha a licenc-megtartás kapcsoló megtartja a /*! … */ blokkokat, amiket a legtöbb CDN licenc megkövetel.

Miért érdemes JavaScriptet tömöríteni

• Gyorsabb oldalbetöltés. A kisebb szkriptek hamarabb elemződnek és hajtódnak végre. Egy 4G mobil kapcsolaton egy 40 százalékos bájtredukció valódi másodperceket farag le az Interaktív Időből, ami az a mérőszám, amit a Google PageSpeed Insights a legagresszívebben mér.
• Alacsonyabb CDN kimenő forgalmi számlák. A CloudFront, Cloudflare és Fastly gigabájtonként számláz a kimenő forgalomért. Egy 40 százalékos szkript csökkentés milliónyi havi oldalmegtekintés mellett valódi megtakarításokká áll össze, mielőtt bármilyen kép vagy CSS munka megtörténne. A matematika gzip és brotli után is áll — a tömörítés eltávolítja azokat a tokeneket, amiket a tömörítőnek egyébként kódolnia kellene.
• Ez a tömörítő nem terheli az oldaladat. A Terser ~1 MB tömörítetlenül. A legtöbb online tömörítő a teljes könyvtárat szállítja az oldal betöltésekor, ami rontja a saját Lighthouse pontszámukat, és az oldalt lomhának érzi, mielőtt a felhasználó bármit gépelne. Ez az oldal lustán tölti be a Tersert csak akkor, amikor rákattintasz a Tömörítés gombra vagy bekapcsolod az Élő módot — így a kezdeti renderelés a Core Web Vitals küszöbök alatt marad, amit az eszköz maga ígér, hogy segít elérni.
• Core Web Vitals teljesítése. A Lighthouse és a PageSpeed Insights nagy JavaScriptet jelöl meg a rossz Teljes Blokkolási Idő közvetlen hozzájárulójaként. A vendor könyvtárak és alkalmazáscsomagok tömörítése a leggyorsabb nyeremény a Lighthouse "Nem használt JavaScript csökkentése" és "Duplikált modulok eltávolítása" auditokon — általában egy egyszeri csökkentés, ami tíz vagy húsz pontot ér.

Gyakori felhasználások

A JavaScript tömörítés egy modern webes projekt szinte minden szakaszában felbukkan.

• Commit előtti horgok: tömöríts egyedi segéd szkripteket a tárolóba commitálás előtt, hogy a commitált műtermék termelésre kész legyen és a diff logikai változásokat mutasson szóköz zaj helyett.
• Harmadik féltől származó widget auditok: illessz be egy vendor beágyazási kódrészletet, és ellenőrizd, hogy már tömörítve van-e, vagy tovább lehet-e zsugorítani, mielőtt milliónyi felhasználónak kiszolgálnád.
• Örökölt szkript tisztítás: tömöríts régi jQuery pluginokat és kézzel írt szkripteket, amik megelőzik a jelenlegi build csővezetékedet, anélkül hogy a forrásfához nyúlnál.

Egy gyakorlati példa

Vegyünk egy kis függvényt: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — körülbelül 130 bájt a megjegyzéssel együtt. Illeszd be fent a Névösszevonás és a Tömörítés bekapcsolásával. A kimenet körülbelül erre rövidül: function add(n,o){return n+o}console.log(add(1,2)); — körülbelül 55 bájt, 58 százalékos csökkentés. Az add függvény neve túléli, mert hivatkozik rá a console.log hívás; a paraméter nevek firstNumber és secondNumber egyetlen betűkre rövidülnek, mert lokálisak a függvény törzsében. Kapcsold ki a Névösszevonást az olvasható paraméternevek megtartásához, miközben továbbra is összevonod a szóközöket és eldobod a megjegyzést.

FAQ

Ez a böngészőmben fut?

Igen. A Terser lustán töltődik be, amikor először kattintasz a Tömörítés gombra vagy bekapcsolod az Élő módot — körülbelül 200 KB tömörítve landol a böngésző gyorsítótárában, aztán nincs további letöltés. A kódod sosem hagyja el az oldalt.

Mi a névösszevonás és biztonságos?

A névösszevonás átnevezi a lokális változókat egyetlen betűkre a bájtok megtakarításához. Biztonságos önálló szkriptekhez és IIFE csomagokhoz, mert az átnevezések soha nem hagyják el a hatókört. NEM biztonságos olyan szkriptekhez, amelyek név szerint teszik elérhetővé a globálisokat (pl. window.myLib = …) burkoló nélkül. Kapcsold ki a Névösszevonást, ha nem vagy biztos.

Miért tört el a kódom a tömörítés után?

Három szokásos gyanúsított: eval vagy with, amelyek karakterláncon keresztül hivatkoznak változókra; Function.name vagy arguments.callee olvasások, amelyek az eredeti azonosítótól függnek; vagy globálisok, amelyeket egy átnevezett név tett elérhetővé. Először kapcsold ki a Névösszevonást, hogy elkülönítsd, hogy az átnevezés vagy egy Tömörítés transzformáció az ok.

Támogatja a modern szintaxist (ES2020+)?

Igen. Állítsd az ECMAScript célt ES2020-ra vagy Következő-re, és a Terser megőrzi az opcionális láncolást, a nullisszilis egyesítést, a legfelső szintű await-et és a logikai hozzárendelési operátorokat. Állítsd ES5-re, és a Terser lefordítja, ahol tud, de ez nem egy teljes transpiler — használj Babel-t olyan szintaxisokhoz, amiket az ES5 egyáltalán nem tud reprezentálni.

A böngészőoldali JavaScript tömörítés a Terser segítségével termelési minőségű kimenetet ad anélkül, hogy build eszközt kéne hozzáadnod. Illessz be egy szkriptet, válaszd ki az ECMAScript célt, másold ki vagy töltsd le az eredményt. Semmi sem töltődik fel, nincs fiók, nincs build csővezeték. A tömörítő maga csak akkor töltődik be, amikor kéred — így az oldal megnyitása néhány kilobájtba kerül, nem egy megabájtba.