CodeKitHub
Nástroje pre kód

HTML Minifikátor a Formátovač

Naposledy aktualizované:

Vložte HTML nižšie a buď ho minifikujte — odstránením komentárov, nadbytočných atribútov a prebytočných medzier — alebo ho naformátujte do čitateľného, odsadeného kódu. Oba smery bežia úplne vo vašom prehliadači pomocou skutočného HTML parsera, nie regexového hacku, takže obsah vo vnútri <pre> a <textarea> zostane nedotknutý.

Čo je tento nástroj?

HTML minifikátor odstráni všetko, čo prehliadač nepotrebuje na správne vykreslenie stránky: komentáre, prebytočné medzery medzi značkami, nadbytočné atribúty ako type="text/javascript" a voliteľné uzatváracie lomky. Výsledkom je funkčne identický HTML, ktorý sa rýchlejšie sťahuje a parsuje.

Tento nástroj je postavený na html-minifier-terser, rovnakom minifikátore, aký sa používa v obľúbených build nástrojoch, takže rozumie štruktúre HTML namiesto slepého odstraňovania medzier — nedotkne sa obsahu citlivého na formátovanie vo vnútri <pre>, <textarea> alebo inline blokov <script>/<style>, a navyše minifikuje aj CSS a JS vložené v kóde.

Prečo ho používať?

  • Skutočný parser pod kapotou, nie regex — bezpečný pri okrajových prípadoch ako bloky <pre>, inline skripty a podmienené komentáre.
  • Minifikuje aj vložený obsah <style> a <script>, nielen okolitú značku.
  • Presne uvidíte, koľko bajtov ste ušetrili pred nasadením súboru.
  • Režim Format zmení skomprimovaný jednoriadkový HTML späť na niečo, čo si človek môže prečítať a upraviť.
  • 100% lokálne spracovanie — váš kód, a čokoľvek súkromné v ňom, nikdy neopustí váš prehliadač.

Ako sa používa

  1. Vložte svoj HTML do vstupného poľa, alebo kliknite na "Load Example" pre vyskúšanie ukážky.
  2. Kliknite na "Minify" pre kompresiu, alebo "Format" pre naformátovanie s 2-medzerovým odsadením.
  3. Skontrolujte správu pod poľami — režim minify ukáže zmenšenie veľkosti; ak sa HTML nedá parsovať, uvidíte presnú chybu namiesto poškodeného výstupu.
  4. Kliknite na "Copy" pre skopírovanie výsledku.

Príklad

Vstup

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Výstup

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Komentáre, odsadenie a zalomenia riadkov sú odstránené; doctype je skrátený. Viditeľná stránka sa vykreslí identicky.

Praktické tipy

  • Minifikujte tesne pred nasadením, nie počas vývoja — čitateľný HTML si nechajte vo verzovacom systéme a minifikujte len výstup buildu.
  • Ak sa stránka po minifikácii správa čudne, skontrolujte JavaScript, ktorý spolieha na presné medzery v textových uzloch (zriedkavé, ale stáva sa to pri niektorých starších widgetoch).
  • Formátovanie minifikovaného HTML zo živej stránky je rýchly spôsob, ako preskúmať jej štruktúru pred písaním scrapera alebo ladením problémov s rozložením.
  • Skombinujte s CSS a JS minifikátormi nižšie, ak váš build proces udržiava štýly a skripty v samostatných súboroch.

Kde sa to hodí v reálnych workflow

Statické stránky, e-mailové šablóny a landing page vytvárané ručne sa často nasadzujú s rovnakým odsadením a komentármi, aké sa používali počas vývoja. Minifikácia pred nasadením ušetrí reálnu, aj keď skromnú, časť prenosovej váhy — a konkrétne pri e-mailovom HTML počet znakov niekedy ovplyvňuje hranicu orezania v Gmaile, takže menší kód má aj funkčný prínos nad rámec rýchlosti.

Smer Format je rovnako užitočný aj naopak: vloženie minifikovanej stránky z view-source a jej preformátovanie je často najrýchlejší spôsob, ako pochopiť štruktúru landing page konkurencie alebo odladiť embed tretej strany.

CSS Minifier · JS Minifikátor

Bežné prípady použitia

  • Zoštíhlenie statickej landing page alebo e-mailovej šablóny pred spustením.
  • Preformátovanie minifikovaného HTML úryvku vytiahnutého z view-source kvôli pochopeniu jeho štruktúry.
  • Vyčistenie HTML vloženého z WYSIWYG editora alebo exportu CMS, ktorý často nesie prebytočné medzery.
  • Rýchla kontrola, či je ručne písaný HTML úryvok správne štruktúrovaný, keďže chyba parsovania sa prejaví ako jasná chybová hláška.

Časté otázky

Je môj HTML niekam nahrávaný?

Nie. Minifikácia aj formátovanie prebiehajú lokálne vo vašom prehliadači pomocou JavaScriptu. Nič z toho, čo vložíte, sa neposiela na server, takže je bezpečné použiť ho aj s internými šablónami alebo nezverejnenými stránkami.

Pokazí minifikácia moju stránku?

Nemalo by — nástroj používa skutočný HTML parser (html-minifier-terser), ktorý rozumie štruktúre značiek, takže zachováva prvky citlivé na medzery ako <pre> a <textarea> a nezlúči atribúty nesprávne. Po minifikácii vždy skontrolujte kritické stránky, najmä ak spoliehate na netradičné inline skripty.

Minifikuje sa aj CSS a JavaScript vo vnútri HTML?

Áno. Inline bloky <style> a <script> sa minifikujú na mieste pomocou rovnakých enginov ako samostatné nástroje na minifikáciu CSS a JS, takže ich nemusíte manuálne extrahovať.

O koľko sa HTML typicky zmenší?

Závisí to od toho, koľko medzier, komentárov a formátovania mal originál — ručne písaný HTML s množstvom odsadenia a komentárov sa bežne zmenší o 20-40 %. HTML generovaný frameworkom, ktorý je už kompaktný, ušetrí menej.

Môžem previesť minifikovaný HTML späť do čitateľného formátu?

Áno — vložte minifikovaný HTML a namiesto "Minify" kliknite na "Format", čím dostanete späť správne odsadený, čitateľný kód.

Súvisiace nástroje