Fără încărcare, 100% local, fără cont

Minifică / Înfrumusețează

Minifică sau înfrumusețează cod. Totul rămâne în browser.

Cum funcționează Minifică / Înfrumusețează

Minify / Beautify comprimă HTML, CSS și JavaScript eliminând comentariile, spațiile albe inutile și caracterele redundante, sau extinde codul minificat înapoi într-o formă indentată și lizibilă. Toată procesarea are loc în browser folosind parsere incluse; nimic din ce lipiți nu este transmis nicăieri. Nimic din ce tastați aici nu părăsește dispozitivul dumneavoastră.

Minificarea afectează direct performanța de încărcare a paginii: fișierele mai mici se transferă mai rapid, se analizează mai rapid și consumă mai puțină lățime de bandă. Pentru desfășurări de producție, activele minificate sunt standard. Această unealtă este utilă când primiți un fișier minificat pe care trebuie să-l citiți (înfrumusețare), când doriți să verificați ce face un minificator cu un fragment înainte de a-l integra într-un pipeline de construcție, sau când aveți nevoie de o minificare rapidă fără a configura o unealtă de construcție.

Scris de Bastien Sulyan

Cum se folosește Minifică / Înfrumusețează, pas cu pas

  1. Lipiți codul HTML, CSS sau JavaScript în zona de intrare.
  2. Selectați tipul de limbaj din meniu (HTML, CSS sau JavaScript).
  3. Da clic pe 'Minifică' pentru a produce versiunea comprimata, sau 'Înfrumusețează' pentru a extinde și indenta codul.
  4. Copiați rezultatul din zona de ieșire folosind butonul de copiere.
  5. Lipiți un cod diferit și repetați după necesitate.

Cazuri de utilizare frecvente

  • Un dezvoltator frontend vrea să minifice un fragment CSS critic pentru a-l încorpora inline în head-ul HTML pentru performanța above-the-fold.
  • Un dezvoltator primește un script extern minificat și trebuie să-l infrumuseteze pentru a înțelege logica acestuia în timpul unei revizuiri de securitate.
  • Un scriitor tehnic are nevoie de o versiune formatata a unui tag de script JSON-LD minificat pentru a include în documentație.
  • Un dezvoltator web verifică economiile de octeți din minificarea unui fișier CSS înainte de a decide dacă adaugă un pas de construcție.

Întrebări frecvente

Este codul pe care îl lipesc trimis vreunui server pentru minificare?

Nu. Minificarea și înfrumusețarea sunt realizate de codul propriu al paginii, scris special pentru acest instrument, nu preluat dintr-un minificator terț. Toată procesarea rămâne în fila browserului. Nimic din ce lipiți aici nu este transmis către Sunasty sau vreo terță parte.

Păstrează minificarea JavaScript comportamentul original al codului?

Un minificator bun păstrează comportamentul eliminând doar spațiile albe, scurtând numele de variabile într-un domeniu de aplicare controlat și eliminând comentariile. Această unealtă vizează transformări sigure. Optimizările agresive precum eliminarea codului mort sau inlinierea funcțiilor nu sunt în general aplicate, deoarece acestea necesită analiza completă a programului.

Pot minifica și apoi infrumuseta rezultatul pentru a-l verifică?

Da. Minifică codul mai întâi, apoi lipește ieșirea minificata înapoi în intrare și da clic pe Înfrumusețează. Versiunea infrumusetata va arăta diferit de sursă originală (numele variabilelor pot fi scurtate, comentariile eliminate) dar va fi structural echivalentă.

Elimină minificarea HTML toate comentariile?

Instrumentul elimină comentariile HTML standard (<!-- ... -->) în timpul minificării. Comentariile condiționale folosite de versiunile vechi de IE (<!--[if IE]...-->) sunt întotdeauna păstrate, astfel încât eliminarea comentariilor nu poate întrerupe comportamente moștenite care depind de ele.

Există o limită de dimensiune a codului pe care îl pot minifica?

Limita o constituie memoria disponibilă a tabului de browser. Codul de până la câteva sute de kilobytes se procesează rapid. Pentru pachete JavaScript mari (megabytes), o unealtă de construcție dedicată precum esbuild, Terser sau Lightning CSS este mai rapidă și mai potrivită pentru utilizare în producție.