JavaScripti minimeerija ja vormindaja

Mis see tööriist on?

JavaScripti minimeerija kirjutab koodi ümber võimalikult väikeseks, säilitades samal ajal identse käitumise: lühendab muutuja- ja funktsiooninimesid seal, kus see on turvaline, eemaldab kommentaarid ja tühikud, arvutab konstante ette kokku ning kõrvaldab kättesaamatu koodi.

See tööriist põhineb Terseril — AST-põhisel minimeerijal, mida kasutavad webpack, Vite, Rollup ja enamik tänapäevaseid JavaScripti ehitustööriistu. Kuna see tegelikult parsib su koodi, mitte ei otsi tekstimustreid, eristab see korrektselt jagamistehet regex-literaalist, ei riku template-stringe, mis sisaldavad //-taolisi jadasid, ega nimeta muutujat ümber nimeks, mis läheb konflikti millegagi väliskoopis.

Miks seda kasutada?

• AST-põhine minimeerimine (Terser) — sama mootor, mida kasutavad suured bundlerid — turvaline regex-literaalide, template-stringide ja closure'itega.
• Segab muutujanimesid tõelise suuruse kokkuhoiu nimel, mitte ainult tühikute eemaldamiseks.
• Näed täpselt, mitu baiti ja mitu protsenti kokku hoidsid.
• Vormindusrežiim muudab obfuskeeritud, ühereaalise minimeeritud JS-i tagasi loetavaks, taandega koodiks — kasulik kolmandate osapoolte skriptide mõistmiseks.
• 100% kohalik töötlus — sinu firmasisene kood ei lahku kunagi su brauserist.

Kuidas kasutada

1. Kleebi oma JavaScript sisendkasti või klõpsa "Load Example", et proovida näidet regex-literaali ja template-stringiga.
2. Klõpsa "Minify", et kood kokku suruda, või "Format", et see 2-tühikuse taandega ilusaks vormindada.
3. Vaata kastide all olevat teadet — minimeerimisrežiim näitab suuruse vähenemist; süntaksiviga sinu koodis näitab selget teadet, mitte ei tooda vaikselt katkist väljundit.
4. Klõpsa "Copy", et tulemus kopeerida.

Näide

Sisend

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Tulemus

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Muutujanimed on lühendatud, kommentaar ja if-lause on koondatud avaldiseks, kuid regex-literaal ja template-string on säilitatud täpselt ning käitumine jääb muutumatuks.

Praktilised nõuanded

• Minimeeri ehitusetapis, mitte käsitsi toimetades — hoia loetav lähtekood versioonihalduses ja genereeri minimeeritud pakett ehitussammuna.
• Kui minimeeritud väljund käitub ootamatult, kontrolli koodi, mis toetub Function.prototype.name'ile või refleksioonile — segamine nimetab funktsioonid ümber ja see võib harvadel juhtudel esile kerkida.
• Kolmanda osapoole skripti vormindamine enne lugemist on palju kiirem kui üritada parsida ühte 2000-tähemärgilist rida.
• Kombineeri allolevate HTML- ja CSS-minimeerijatega, kui valmistad ette tervet staatilist paketti kasutuselevõtuks.

Kuhu see päris töövoogudes sobitub

JavaScript on tavaliselt lehe suurim renderdust või parsimist blokeeriv ressurss, seega on selle minimeerimisel reaalne, mõõdetav mõju laadimisajale — rohkem kui HTML-il või CSS-il baidi kohta. Enamik tänapäevaseid raamistikke teeb seda automaatselt ehitusetapis, kuid käsitsi kirjutatud skriptid, brauserilaiendused ja bookmarkletid saadetakse sageli välja minimeerimata, kui keegi neid läbi sellise tööriista ei jooksuta.

Vormindussuunda kasutatakse tavaliselt vastupidises rollis: tootmisvea silumine minimeeritud stack trace'ist on palju lihtsam, kui ümbritsev kood on uuesti vormindatud ja loetav, isegi ilma originaalsete muutujanimedeta.

→ HTML minifitseerija · CSS Minifier

Levinud kasutusjuhud

• Eraldiseisva skripti või bookmarkleti kahandamine enne avaldamist.
• Elavalt saidilt tõmmatud minimeeritud skripti ümbervormindamine, et mõista, mida see teeb.
• Foorumipostitusest või tehisintellekti genereeritud lõigust kleebitud JavaScripti korrastamine enne selle hoolikat lugemist.
• Kiire kontroll, kas käsitsi kirjutatud JS-lõigul on süntaksiviga, kuna parsimisviga kuvatakse selge teatena.

Korduma kippuvad küsimused