Az eszközről
A JavaScript kicsinyítés csökkenti a forráskód méretét azáltal, hogy eltávolítja a felesleges karaktereket, és (megfelelő minifikátorokkal) a helyi változókat rövidebb nevekre nevezi át. Az első kategória – szóközök és megjegyzések eltávolítása – egyszerű és kockázatmentes. A második – a változók átnevezése – megköveteli a hatókör-szabályok megértését, és ez az, amit az éles minifikátorok, például a Terser és az esbuild a legjobbak.
Ez az eszköz a biztonságos kicsinyítésre összpontosít: a megjegyzések eltávolítására, a szóközök összecsukására, a redundáns pontosvesszők eltávolítására és a nyilvánvaló minták lerövidítésére. A változók átnevezése konzervatív – csak a világos hatókörű helyi változókat érinti meg, és a külső hivatkozású neveket magára hagyja. Az eredmény funkcionálisan megegyezik a forrással.
A termelési szintű minimalizáláshoz a dedikált eszközök (Terser, esbuild, swc) megértik a teljes ECMAScript hatókör-modellt, és lényegesen kisebb teljesítményt produkálnak. Ez az eszköz a böngészőoldali gyors minimalizálásra szolgál, ha nem áll rendelkezésre teljes összeállítás.
Miért csökkentse a JavaScriptet?
A JavaScript-csomagok jellemzően a legnagyobb egyedi erőforrások egy modern weboldalon. A kicsinyítés rutinszerűen 30-60%-os méretcsökkenést eredményez a nem minimált forráshoz képest. A gzip-pel vagy Brotlival kombinálva a csökkentés némileg csökken, de a kombináció még mindig mérhető bájtokat takarít meg – különösen a lassú kapcsolatokat használók számára.
A gyorsabb JavaScript gyorsabb interaktív időt is jelent. A kisebb szkriptek gyorsabban letöltődnek, gyorsabban elemezhetők és hamarabb futnak le. Azokon a webhelyeken, ahol a TTI befolyásolja a visszafordulási arányokat és a SEO rangsorolását, a minimalizálás az egyik legolcsóbb nyeremény.
Műszaki részletek
A minifier tokenizálja a JavaScriptet egy olyan elemző segítségével, amely tiszteletben tartja az ECMAScript szintaxist. A megjegyzéseket (egysoros és többsoros) eltávolítjuk, kivéve a /*-al jelölt licencmegjegyzéseket! előtag. A szóközök össze vannak csukva, kivéve ahol szintaktikailag szükséges (az azonosítók között, a kulcsszavak után).
A konzervatív változó átnevezés lerövidíti a helyi változókat egyszerű hatókörben. A globális, az exportált és az importált neveket nem nevezik át – ez megszakítaná a külső hivatkozásokat. Mély átnevezéshez használja a Terser vagy az esbuild programot megfelelő modul-tudatos elemzéssel.
Élesetek: az automatikus pontosvessző beszúrása (ASI) azt jelenti, hogy a minifikátornak bizonyos összefüggésekben meg kell őriznie az újsorokat, hogy elkerülje a program viselkedésének megváltoztatását. A sablonliterálok, a regex-literálok és a JSX (ha a bemenet tartalmazza) pontosan megőrződnek, mert előfordulhat, hogy tartalmukat nem biztonságos tömöríteni.
Gyakran ismételt kérdések
- Megváltoztatja-e a kicsinyítés a kódom működését?
- Nem. A kicsinyítés eltávolítja a szóközöket és a megjegyzéseket, amelyek nem befolyásolják a végrehajtást. A változók rövidítése (mangling) átnevezi a helyi változókat, de megőrzi a viselkedést. A globális változók és az exportált nevek változatlanok maradnak.
- Csökkentsem a fejlesztésben vagy a gyártásban?
- A termelésben csak kicsinyített kódot használjon. A fejlesztés során őrizze meg az eredeti olvasható kódot. A legtöbb összeállítási eszköz (Webpack, Vite, esbuild) automatikusan kezeli a kicsinyítést az éles összeállítási folyamat részeként.
- Mi a különbség a kicsinyítés és az obfuszkálás között?
- A kicsinyítés csökkenti a méretet, miközben a kód funkcionálisan olvasható marad, ha formázva van. Az obfuszkáció szándékosan megnehezíti a kód megértését (karakterlánc kódolás, vezérlési folyamat egyengetése). Ez az eszköz a méretcsökkentésre összpontosít, nem az elhomályosításra.
- Mekkora méretcsökkenésre számítsak?
- Általában 30-60% a gzip előtt. A jól kommentált, hosszú változóneveket tartalmazó kódnál tapasztalható a legnagyobb csökkenés. A gzip tömörítéssel kombinálva a JavaScript fájlok gyakran 80-90%-kal kisebbek, mint az eredeti forrás.
- Fel van töltve a kódom egy szerverre?
- Nem. A minifier a böngészőjében fut.
- Mennyivel lesz kisebb a JavaScriptem?
- Általában 30-60%-os csökkenés. A hosszú azonosítókkal rendelkező változó-nehéz kód többet tömörít; a kifejezés-nehéz kód kevésbé tömörít.
- Kézzel kell kicsinyíteni?
- Soha. Olvasható JavaScript fenntartása a forrásban. Futtassa a minimalizálást összeállítási lépésként vagy a telepítés részeként.
- TypeScripten működik?
- A TypeScriptet először JavaScriptre kell fordítani a tsc vagy az esbuild használatával. Lefordítás után a kapott JavaScript kicsinyíthető.