Minifier și Formator JavaScript

Ce este acest instrument?

Un minifier JavaScript rescrie codul pentru a fi cât mai mic posibil păstrând comportamentul identic: scurtează numele variabilelor și funcțiilor unde e sigur, elimină comentariile și spațiile albe, împăturește constantele și elimină codul inaccesibil.

Acest instrument este construit pe Terser, minifierul bazat pe AST folosit de webpack, Vite, Rollup și majoritatea instrumentelor moderne de build JavaScript. Pentru că efectiv parsează codul tău în loc să potrivească text prin șabloane, distinge corect un operator de împărțire de un literal regex, nu strică template string-uri care conțin secvențe ce arată ca //, și nu redenumește o variabilă cu un nume care se ciocnește cu ceva dintr-un scope exterior.

De ce să-l folosești?

• Minificare bazată pe AST (Terser), același motor folosit de bundlerele majore — sigur cu literali regex, template string-uri și closures.
• Reduce numele variabilelor pentru economii reale de dimensiune, nu doar eliminare de spații albe.
• Vezi exact câți octeți și ce procent ai economisit.
• Modul de formatare transformă JS minificat, obfuscat, pe o singură linie, înapoi în cod lizibil, indentat — util pentru înțelegerea scripturilor terță parte.
• Procesare 100% locală — codul proprietar nu părăsește niciodată browserul tău.

Cum se folosește

1. Lipește JavaScript-ul tău în caseta de input, sau dă clic pe „Încarcă exemplu” pentru a încerca un exemplu cu un literal regex și un template string.
2. Dă clic pe „Minifică” pentru a-l comprima, sau „Formatează” pentru a-l înfrumuseța cu indentare de 2 spații.
3. Verifică mesajul de sub casete — modul minifică arată reducerea de dimensiune; o eroare de sintaxă în codul tău arată un mesaj clar în loc să producă silențios un output stricat.
4. Dă clic pe „Copiază” pentru a obține rezultatul.

Exemplu

Intrare

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"}

Numele variabilelor sunt scurtate, comentariul și instrucțiunea if sunt reduse la o expresie, dar literalul regex și template string-ul sunt păstrate exact, iar comportamentul rămâne neschimbat.

Sfaturi practice

• Minifică la momentul build-ului, nu editând manual — păstrează sursa lizibilă în controlul versiunilor și generează bundle-ul minificat ca pas de build.
• Dacă output-ul minificat se comportă neașteptat, verifică codul care se bazează pe Function.prototype.name sau reflecție — reducerea numelor redenumește funcții, iar asta poate apărea în cazuri rare.
• Formatarea unui script terță parte înainte de a-l citi este mult mai rapidă decât încercarea de a parsa o singură linie de 2.000 de caractere.
• Combină cu minifierele HTML și CSS de mai jos dacă pregătești un bundle static complet pentru implementare.

Unde se potrivește asta în fluxurile de lucru reale

JavaScript este de obicei cea mai mare resursă care blochează randarea sau parsarea pe o pagină, deci minificarea lui are un efect real, măsurabil asupra timpului de încărcare — mai mult decât HTML sau CSS octet cu octet. Majoritatea framework-urilor moderne fac asta automat la momentul build-ului, dar scripturile scrise manual, extensiile de browser și bookmarklet-urile se lansează adesea neminificate dacă nimeni nu le rulează printr-un instrument ca acesta.

Direcția de formatare este folosită adesea în sens opus: depanarea unei erori de producție dintr-un stack trace minificat este mult mai ușoară odată ce codul din jur este reformatat și lizibil, chiar și fără numele originale ale variabilelor.

→ Minificator HTML · Minificator CSS

Cazuri de utilizare comune

• Micșorarea unui script de sine stătător sau bookmarklet înainte de publicare.
• Reformatarea unui script minificat luat de pe un site live pentru a înțelege ce face.
• Curățarea JavaScript-ului lipit dintr-o postare pe forum sau un fragment generat de AI înainte de a-l citi cu atenție.
• Verificarea rapidă dacă un fragment JS scris manual are o eroare de sintaxă, deoarece o eșec de parsare apare ca un mesaj explicit.

Întrebări frecvente