Minificare HTML, CSS, JS
Micșorează codul eliminând comentariile și spațiile inutile. Pentru producție folosește și un bundler.
Mulțumim! Ne ajută să facem uneltele mai bune.
Nu s-a putut trimite acum. Încearcă mai târziu.
Unealta de minificare micșorează codul HTML, CSS sau JavaScript eliminând comentariile, spațiile și rândurile inutile. Lipești codul, alegi limbajul și primești versiunea compactă, plus câte caractere ai câștigat, în procente. E potrivită pentru bucăți de cod, stiluri inline sau un fișier mic, fără să instalezi nimic.
Ce face pentru fiecare limbaj
- CSS: șterge comentariile /* */, comprimă spațiile, scoate spațiile din jurul acoladelor, două punctelor, punct și virgulei, virgulelor și combinatorilor > ~ +, și elimină ultimul punct și virgulă dinaintea acoladei de închidere.
- HTML: șterge comentariile (le păstrează pe cele condiționale pentru Internet Explorer), elimină spațiile dintre etichete și comprimă spațiile multiple.
- JavaScript: șterge comentariile /* */ și rândurile care conțin doar un comentariu //, elimină indentarea și rândurile goale. Nu modifică nimic în interiorul instrucțiunilor, ca să nu strice codul.
Exemple cu rezultatul real
| Limbaj | Înainte | După | Câștig |
|---|---|---|---|
| CSS (stilul din exemplu) | 81 caractere | 48 caractere | 41% |
| HTML (meniu cu 2 elemente) | 65 caractere | 39 caractere | 40% |
| JS (funcție cu 2 comentarii) | 74 caractere | 38 caractere | 49% |
De exemplu, CSS-ul cu un comentariu, regula body cu margin și color și regula .btn cu padding devine „body{margin:0;color:#222}.btn{padding:10px 20px}”.
La ce să fii atent
Minificarea HTML lipește etichetele între ele, deci un spațiu dintre două elemente pe un rând, de exemplu două linkuri, poate dispărea. În CSS, conținutul din calc(), clamp(), min() și max() este protejat: spațiile din jurul lui + și −, obligatorii acolo, rămân (calc(100% - 2rem) nu devine calc(100%-2rem)). Spațiul dinaintea lui „:” se păstrează în selectori, pentru că div :hover și div:hover înseamnă lucruri diferite; se lipește doar în declarații și în condițiile @media. Conținutul din pre și textarea poate fi afectat la HTML. Testează pagina după minificare și păstrează mereu fișierul original, pentru editare. Pentru un site în producție, un instrument de build (bundler) face în plus redenumirea variabilelor JS și eliminarea codului nefolosit. După ce micșorezi codul, nu uita de imagini, care de obicei cântăresc mult mai mult: compresia imaginilor aduce câștigul cel mai mare.
Întrebări frecvente
Ce înseamnă minificare?
Eliminarea caracterelor de care browserul nu are nevoie, cum ar fi spațiile, rândurile noi și comentariile, fără să schimbe ce face codul.
Cât de mult se micșorează un fișier?
Depinde de cât de aerisit e scris. Un CSS cu comentarii și indentare scade adesea cu 20–40%, iar cu compresia gzip a serverului câștigul total e și mai mare.
De ce JavaScript-ul nu se micșorează la fel de mult?
Unealta elimină doar comentariile și indentarea, ca să nu riște să strice codul. Pentru o minificare completă JS folosește un bundler.
Pot reveni la codul original din cel minificat?
Comentariile se pierd definitiv. Formatarea o poți reface cu un formatter, dar păstrează întotdeauna sursa originală.
Actualizat:
Ce unealtă îți lipsește?
Spune-ne ce calculator sau unealtă ai căutat și n-ai găsit. Citim fiecare sugestie.