JavaScript Minifikáló és Formázó

Mi ez az eszköz?

Egy JavaScript minifikáló úgy írja át a kódot, hogy a lehető legkisebb legyen, miközben pontosan ugyanúgy viselkedik: rövidíti a változó- és függvényneveket ahol biztonságos, eltávolítja a megjegyzéseket és szóközöket, összevonja a konstansokat, és megszünteti az elérhetetlen kódot.

Ez az eszköz a Terserre épül, az AST-alapú minifikálóra, amelyet a webpack, a Vite, a Rollup és a legtöbb modern JavaScript build-eszköz használ. Mivel valóban elemzi a kódodat ahelyett, hogy szövegmintákat keresne, helyesen különbözteti meg az osztás operátort a reguláris kifejezéstől, nem töri el a //-szerű szekvenciákat tartalmazó sablonszövegeket, és nem nevez át egy változót olyan névre, amely ütközik egy külső hatókörben lévővel.

Miért érdemes használni?

• AST-alapú minifikálás (Terser), ugyanaz a motor, amelyet a nagy bundler-ek használnak — biztonságos reguláris kifejezésekkel, sablonszövegekkel és lezárásokkal.
• Valós méretmegtakarításhoz rövidíti a változóneveket, nem csak szóközt távolít el.
• Pontosan lásd, hány bájtot és hány százalékot takarítottál meg.
• A Formázás mód visszaalakítja a homályosított, egysoros minifikált JS-t olvasható, behúzott kóddá — hasznos harmadik féltől származó szkriptek megértéséhez.
• 100%-ban helyi feldolgozás — a saját fejlesztésű kód soha nem hagyja el a böngésződet.

Használati útmutató

1. Illeszd be a JavaScript kódot a bemeneti mezőbe, vagy kattints a "Példa betöltése" gombra egy reguláris kifejezést és sablonszöveget tartalmazó minta kipróbálásához.
2. Kattints a "Minifikálás" gombra a tömörítéshez, vagy a "Formázás" gombra a 2 szóközös behúzással történő szépítéshez.
3. Nézd meg a mezők alatti üzenetet — a minifikálás mód megmutatja a méretcsökkenést; a kód szintaxishibája esetén egyértelmű üzenet jelenik meg csendben törött kimenet helyett.
4. Kattints a "Másolás" gombra az eredmény megszerzéséhez.

Példa

Bemenet

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // egyszerű ellenőrzés
    return msg;
  }
  return "Hi there";
}

Kimenet

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

A változóneveket lerövidítettük, a megjegyzést és az if-utasítást egy kifejezéssé vontuk össze, de a reguláris kifejezés és a sablonszöveg pontosan megmaradt, és a viselkedés változatlan.

Gyakorlati tippek

• Minifikálj build időben, ne kézi szerkesztéssel — tartsd az olvasható forráskódot verziókövetés alatt, és állítsd elő a minifikált csomagot egy build-lépésként.
• Ha a minifikált kimenet váratlanul viselkedik, keress olyan kódot, amely a Function.prototype.name-re vagy reflexióra támaszkodik — a névrövidítés átnevezi a függvényeket, és ez ritka esetekben felszínre kerülhet.
• Egy harmadik féltől származó szkript formázása olvasás előtt sokkal gyorsabb, mint megpróbálni egyetlen 2000 karakteres sort elemezni.
• Kombináld a lenti HTML és CSS minifikálókkal, ha egy teljes statikus csomagot készítesz élesítéshez.

Hol illeszkedik ez valós munkafolyamatokba

A JavaScript általában a legnagyobb megjelenítést vagy elemzést blokkoló elem egy oldalon, így a minifikálásának valós, mérhető hatása van a betöltési időre — nagyobb, mint a HTML vagy CSS bájtonként. A legtöbb modern keretrendszer ezt automatikusan végzi build időben, de a kézzel írt szkriptek, böngészőbővítmények és könyvjelző-szkriptek gyakran minifikálatlanul kerülnek ki, hacsak valaki nem futtatja őket egy ilyen eszközön keresztül.

A Formázás irányt gyakran fordítva is használják: sokkal könnyebb egy éles hiba hibakeresése egy minifikált stacktrace-ből, ha a környező kód át van formázva és olvasható, még az eredeti változónevek nélkül is.

→ HTML Minifier · CSS Minifier

Gyakori felhasználási esetek

• Egy önálló szkript vagy könyvjelző-szkript zsugorítása közzététel előtt.
• Egy élő oldalról letöltött minifikált szkript átformázása annak megértéséhez, mit csinál.
• Egy fórumbejegyzésből vagy AI által generált részletből beillesztett JavaScript kód rendbetétele alapos olvasás előtt.
• Gyors ellenőrzés, hogy egy kézzel írt JS részletnek van-e szintaxishibája, mivel egy elemzési hiba explicit üzenetként jelenik meg.

Gyakori kérdések