O ovom alatu
Minifikacija JavaScripta smanjuje veličinu izvornog koda uklanjanjem nepotrebnih znakova i (s odgovarajućim minifikatorima) preimenovanjem lokalnih varijabli u kraća imena. Prva kategorija — uklanjanje razmaka i komentara — jednostavna je i bez rizika. Drugo — preimenovanje varijable — zahtijeva razumijevanje pravila opsega i to je ono što minifikatori proizvodnje kao što su Terser i esbuild rade najbolje.
Ovaj se alat usredotočuje na sigurno smanjivanje: uklanjanje komentara, smanjivanje razmaka, uklanjanje suvišnih točka-zareza i skraćivanje očitih uzoraka. Preimenovanje varijabli je konzervativno — dotiču se samo lokalne varijable u jasnim opsegima, a imena s vanjskim referencama su ostavljena. Rezultat je funkcionalno identičan izvoru.
Za minimizaciju proizvodne razine, namjenski alati (Terser, esbuild, swc) razumiju puni model opsega ECMAScripta i proizvode znatno manji izlaz. Ovaj alat služi za brzo smanjivanje na strani preglednika kada potpuna postavka izrade nije dostupna.
Zašto smanjiti JavaScript
JavaScript paketi obično su najveći pojedinačni resurs na modernoj web stranici. Umanjivanje rutinski proizvodi 30–60% smanjenja veličine u odnosu na neminificirani izvor. U kombinaciji s gzipom ili Brotlijem, smanjenje se donekle smanjuje, ali kombinacija i dalje štedi mjerljive bajtove — osobito za korisnike sa sporim vezama.
Brži JavaScript znači i brže vrijeme do interaktivnosti. Manje se skripte brže preuzimaju, brže analiziraju i izvode prije. Za web-mjesta na kojima TTI utječe na stope napuštanja početne stranice i SEO rangiranje, smanjivanje je jedna od najjeftinijih dostupnih pobjeda.
Tehnički detalji
Minifikator tokenizira JavaScript pomoću parsera koji poštuje ECMAScript sintaksu. Komentari (jednoredni i višeredni) se uklanjaju osim komentara o licenci označenih s /*! prefiks. Praznina je sažeta osim gdje je to sintaktički potrebno (između identifikatora, iza ključnih riječi).
Konzervativno preimenovanje varijabli skraćuje lokalne varijable u jednostavnim opsegima. Globalna, izvozna i uvezena imena nisu preimenovana — to bi prekinulo vanjske reference. Za dubinsko preimenovanje koristite Terser ili esbuild s odgovarajućom analizom s obzirom na module.
Rubni slučajevi: automatsko umetanje točke i zareza (ASI) znači da minifikator mora sačuvati nove retke u nekim kontekstima kako bi se izbjegla promjena ponašanja programa. Literali predloška, regex literali i JSX (ako ga unos uključuje) točno su sačuvani jer njihov sadržaj možda nije siguran za komprimiranje.
Često postavljana pitanja
- Mijenja li minifikacija način rada mog koda?
- Ne. Umanjivanjem se uklanjaju razmaci i komentari koji ne utječu na izvođenje. Skraćivanje varijabli (manjanje) preimenuje lokalne varijable, ali čuva ponašanje. Globalne varijable i izvezeni nazivi ostaju netaknuti.
- Trebam li smanjiti u razvoju ili proizvodnji?
- Koristite samo umanjeni kod u proizvodnji. Tijekom razvoja zadržite izvorni čitljiv kod. Većina alata za izradu (Webpack, Vite, esbuild) automatski rukuje minifikacijom kao dijelom proizvodnog procesa izrade.
- Koja je razlika između umanjivanja i maskiranja?
- Umanjivanjem se smanjuje veličina dok kod ostaje funkcionalno čitljiv ako je formatiran. Zamagljivanje namjerno čini kod teškim za razumijevanje (kodiranje niza, izravnavanje toka kontrole). Ovaj alat usmjeren je na smanjenje veličine, a ne na maskiranje.
- Koliko smanjenje veličine mogu očekivati?
- Obično 30-60% prije gzipa. Dobro komentirani kod s dugim nazivima varijabli ima najveća smanjenja. U kombinaciji s gzip kompresijom, JavaScript datoteke često su 80-90% manje od izvornog izvora.
- Je li moj kod prenesen na poslužitelj?
- Ne. Minifier radi u vašem pregledniku.
- Koliko će moj JavaScript biti manji?
- Obično smanjenje od 30–60%. Kod s puno varijabli s dugim identifikatorima sažima se više; kod s puno izraza manje se sažima.
- Trebam li minimizirati ručno?
- nikada. Održavajte čitljiv JavaScript u izvornom jeziku. Pokrenite minimizaciju kao korak izgradnje ili kao dio implementacije.
- Radi li na TypeScriptu?
- TypeScript treba najprije prevesti u JavaScript pomoću tsc ili esbuild. Nakon što se prevede, rezultirajući JavaScript može se minimizirati.