Sellest tööriistast
JavaScripti minimeerimine vähendab lähtekoodi suurust, eemaldades mittevajalikud märgid ja (õigete minimeerijate korral) nimetades kohalikud muutujad ümber lühemateks nimedeks. Esimene kategooria – tühikute ja kommentaaride eemaldamine – on lihtne ja riskivaba. Teine – muutuja ümbernimetamine – nõuab ulatuse reeglite mõistmist ja see on see, mida tootmisminiformaatorid, nagu Terser ja esbuild, kõige paremini teevad.
See tööriist keskendub turvalisele minimeerimisele: kommentaaride eemaldamine, tühikute ahendamine, üleliigsete semikoolonite eemaldamine ja ilmsete mustrite lühendamine. Muutujate ümbernimetamine on konservatiivne – puudutatakse ainult selge ulatusega kohalikke muutujaid ja väliselt viidatud nimed jäetakse üksi. Tulemus on funktsionaalselt identne allikaga.
Tootmistasemel minimeerimiseks kasutavad spetsiaalsed tööriistad (Terser, esbuild, swc) kogu ECMAScripti ulatuse mudelit ja toodavad oluliselt väiksemat väljundit. See tööriist on mõeldud kiireks brauseripoolseks minimeerimiseks, kui täielik järgu seadistus pole saadaval.
Miks JavaScripti minimeerida?
JavaScripti paketid on tavaliselt kaasaegse veebilehe suurim üksikressurss. Minimeerimine vähendab tavaliselt 30–60% suurust võrreldes minimeerimata allikaga. Koos gzipi või Brotliga väheneb vähendamine mõnevõrra, kuid kombinatsioon säästab siiski mõõdetavaid baite – eriti aeglase ühendusega kasutajatele.
Kiirem JavaScript tähendab ka kiiremat aega interaktiivseks. Väiksemad skriptid laaditakse alla kiiremini, sõeluvad kiiremini ja käivituvad varem. Saitide puhul, kus TTI mõjutab põrkemäärasid ja SEO asetust, on minimeerimine üks odavamaid saadaolevaid võite.
Tehnilised üksikasjad
Minifier tokeniseerib JavaScripti, kasutades parserit, mis austab ECMAScripti süntaksit. Kommentaarid (ühe- ja mitmerealised) eemaldatakse, välja arvatud /*-ga tähistatud litsentsi kommentaarid! eesliide. Tühik on ahendatud, välja arvatud süntaktiliselt nõutavatel juhtudel (identifikaatorite vahel, märksõnade järel).
Konservatiivne muutujate ümbernimetamine lühendab kohalikke muutujaid lihtsas ulatuses. Globaalseid, eksporditavaid ja imporditud nimesid ümber ei nimetata – see rikuks väliseid viiteid. Põhjalikuks ümbernimetamiseks kasutage Terserit või esbuildi koos õige mooduliteadliku analüüsiga.
Äärejuhtumid: automaatne semikooloni sisestamine (ASI) tähendab, et minimeerija peab mõnes kontekstis säilitama reavahetused, et vältida programmi käitumise muutumist. Malli literaalid, regex-literaalid ja JSX (kui sisend sisaldab seda) säilitatakse täpselt, kuna nende sisu ei pruugi olla ohutu tihendada.
Korduma kippuvad küsimused
- Kas minimeerimine muudab minu koodi toimimist?
- Ei. Vähendamine eemaldab tühikud ja kommentaarid, mis ei mõjuta täitmist. Muutujate lühendamine (mangling) nimetab kohalikud muutujad ümber, kuid säilitab käitumise. Globaalsed muutujad ja eksporditud nimed jäävad puutumata.
- Kas ma peaksin arenduses või tootmises vähendama?
- Kasutage tootmises ainult minimeeritud koodi. Arendamise ajal säilitage algne loetav kood. Enamik koostamise tööriistu (Webpack, Vite, esbuild) käsitleb minimeerimist automaatselt tootmisprotsessi osana.
- Mis vahe on minimeerimisel ja hägustamisel?
- Minimeerimine vähendab suurust, säilitades samal ajal vormindatud koodi funktsionaalselt loetavana. Hägustamine muudab koodi tahtlikult raskesti mõistetavaks (stringi kodeerimine, juhtvoo tasandamine). See tööriist keskendub suuruse vähendamisele, mitte segamisele.
- Kui suurt suuruse vähenemist peaksin ootama?
- Tavaliselt 30–60% enne gzipi. Hästi kommenteeritud ja pikkade muutujate nimedega kood näeb kõige suuremaid langusi. Koos gzip-tihendusega on JavaScripti failid sageli 80–90% väiksemad kui algallikas.
- Kas mu kood on serverisse üles laaditud?
- Ei. Minifier töötab teie brauseris.
- Kui palju väiksem on minu JavaScript?
- Tavaliselt väheneb see 30–60%. Pikkade identifikaatoritega muutuv-raske kood tihendab rohkem; väljendusrikas kood tihendab vähem.
- Kas ma peaksin käsitsi minimeerima?
- Mitte kunagi. Säilitage allikas loetav JavaScript. Käivitage minimeerimine koostamise etapina või juurutamise osana.
- Kas see töötab TypeScriptiga?
- TypeScript tuleb esmalt tsc või esbuildi abil JavaScriptiks kompileerida. Pärast kompileerimist saab saadud JavaScripti minimeerida.