JavaScript minifikator in formatter

Kaj je to orodje?

JavaScript minifikator prepiše kodo tako, da je čim manjša, obenem pa se obnaša popolnoma enako: skrajša imena spremenljivk in funkcij, kjer je to varno, odstrani komentarje in presledke, zloži konstante ter odstrani nedosegljivo kodo.

To orodje temelji na Terserju, minifikatorju na osnovi AST, ki ga uporabljajo webpack, Vite, Rollup in večina sodobnih orodij za gradnjo JavaScripta. Ker dejansko razčleni tvojo kodo namesto ujemanja besedila po vzorcih, pravilno loči operator deljenja od regex izraza, ne poškoduje predlog nizov, ki vsebujejo zaporedja, podobna //, in ne preimenuje spremenljivke v ime, ki bi trčilo z nečim v zunanjem obsegu.

Zakaj ga uporabiti?

• Minifikacija na osnovi AST (Terser), enak pogon kot pri glavnih orodjih za pakiranje — varen z regex izrazi, predlogami nizov in zaprtji.
• Preimenuje spremenljivke za resnične prihranke pri velikosti, ne le odstranjevanje presledkov.
• Natančno vidiš, koliko bajtov in koliko odstotkov si prihranil.
• Način oblikovanja spremeni zameglen, enovrstičen minificiran JS nazaj v berljivo, zamaknjeno kodo — koristno za razumevanje skript tretjih oseb.
• 100 % lokalna obdelava — lastniška koda nikoli ne zapusti tvojega brskalnika.

Kako ga uporabljati

1. Prilepi svoj JavaScript v vhodno polje ali klikni "Naloži primer" za preizkus vzorca z regex izrazom in predlogo niza.
2. Klikni "Minificiraj", da ga stisneš, ali "Formatiraj", da ga razlepiš z 2-presledčnim zamikom.
3. Preveri sporočilo pod poljema — način minifikacije prikaže zmanjšanje velikosti, sintaktična napaka v tvoji kodi pa prikaže jasno sporočilo namesto tihe izdelave pokvarjenega izhoda.
4. Klikni "Kopiraj", da pridobiš rezultat.

Primer

Vnos

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

Rezultat

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

Imena spremenljivk so skrajšana, komentar in if-stavek pa strnjena v izraz, medtem ko sta regex izraz in predloga niza ohranjena natanko, obnašanje pa nespremenjeno.

Praktični nasveti

• Minificiraj ob gradnji, ne z ročnim urejanjem — hrani berljivo izvorno kodo pod nadzorom različic in generiraj minificiran paket kot korak gradnje.
• Če se minificiran izhod obnaša nepričakovano, preveri kodo, ki se opira na Function.prototype.name ali refleksijo — preimenovanje spremeni imena funkcij, kar se lahko pokaže v redkih robnih primerih.
• Formatiranje skripte tretje osebe pred branjem je veliko hitrejše kot poskus razčlenjevanja ene same vrstice z 2000 znaki.
• Kombiniraj z minifikatorjema za HTML in CSS spodaj, če pripravljaš celoten statični paket za uvajanje.

Kam to sodi v resničnih delovnih tokovih

JavaScript je običajno največje sredstvo, ki blokira izris ali razčlenjevanje na strani, zato ima njegova minifikacija resničen, merljiv vpliv na čas nalaganja — bolj kot HTML ali CSS bajt za bajtom. Večina sodobnih ogrodij to počne samodejno ob gradnji, vendar ročno napisane skripte, razširitve za brskalnik in bookmarkleti pogosto ostanejo neminificirani, dokler jih nekdo ne požene skozi orodje, kot je to.

Smer oblikovanja se pogosto uporablja v nasprotni smeri: razhroščevanje produkcijske napake iz minificirane sledi sklada je veliko lažje, ko je okoliška koda ponovno oblikovana in berljiva, tudi brez izvirnih imen spremenljivk.

→ Minifikator HTML · CSS minifikator

Pogosti primeri uporabe

• Skrčitev samostojne skripte ali bookmarkleta pred objavo.
• Ponovno oblikovanje minificirane skripte, pridobljene z žive strani, da razumeš, kaj počne.
• Čiščenje JavaScripta, prilepljenega iz objave na forumu ali fragmenta, ustvarjenega z AI, pred natančnim branjem.
• Hitro preverjanje, ali ima ročno napisan JS fragment sintaktično napako, saj se napaka pri razčlenjevanju pokaže kot izrecno sporočilo.

Pogosta vprašanja