Minify e beautify per HTML, CSS, JSON, XML. Riduzione tipica del 30-50% sui sorgenti HTML/CSS, fino al 70% sul JSON pretty-printed. Statistiche di compressione inline. Per JavaScript serve un minifier AST-based (Terser, esbuild, swc) integrato nella build pipeline: questo tool si limita ai linguaggi che si possono trattare con regole text-replacement deterministiche.
HTML, CSS, JSON o XML. Per HTML il tool preserva il contenuto di <pre>, <textarea>, <script>, <style> intatto (whitespace significativo).
Minify rimuove commenti e collassa whitespace. Beautify riformatta con indentazione consistente. Funzionalità inverse: minify l'output del beautify ti restituisce un sorgente equivalente.
Lo status bar mostra dimensione input, dimensione output, percentuale di riduzione/aumento. Tipico: HTML -30%, CSS -25%, JSON pretty -> minified -65%.
Copia per uso diretto. Per workflow di build (Webpack, Vite, esbuild), questi minifier sono integrati nei tool: usa il minifier qui solo per script ad-hoc o quick check.
Linguaggi coperti. Il minifier elabora HTML, CSS, JSON e XML, cioè linguaggi su cui la riduzione di whitespace e commenti può essere applicata con regole deterministiche di text-replacement. Per JavaScript la riduzione affidabile richiede un parser AST (Terser, esbuild, swc) capace di operare su rinomina variabili, dead code elimination e mangling: trasformazioni semanticamente complesse, fuori scope per un'utility lightweight e correttamente di responsabilità della build pipeline (Webpack, Vite, esbuild).
HTML, le regole di preservazione. Il minifier HTML rispetta i contesti dove whitespace è significativo: dentro <pre>, <textarea>, <script>, <style> il contenuto resta intatto. Alcuni minifier più aggressivi rimuovono newline dentro <pre> spezzando i code samples o rimuovono whitespace dentro <script> spezzando i template literal multi-riga: qui questi errori sono prevenuti.
Privacy operativa. HTML, CSS e JSON di un sito in build possono contenere riferimenti a backend interni, schema database, struttura API, dummy account o secret in commenti. La minificazione avviene direttamente nel browser, evitando di trasferire questi sorgenti a un servizio terzo per un'operazione che è essenzialmente meccanica.
Termini tecnici usati in questa pagina, spiegati in due righe.
<pre>, dentro stringhe JS/CSS, in CDATA XML. Il minifier rispetta questi contesti. npx terser file.js -c -m.#aabbcc diventa #abc dove possibile (solo se i tre canali hanno entrambi i nibble uguali). Altri micro-ottimizzazioni (rimozione unità su 0, conversione rgba(0,0,0,1) -> #000) non sono implementate per non rischiare di rompere CSS edge case.<pre>, <textarea>, <script>, <style>. Edge case: HTML con whitespace significativo nell'inline (es. <span>a</span> <span>b</span>) può diventare <span>a</span><span>b</span> con i due span attaccati. Per layout testuali sensibili al whitespace, usare beautify e rivedere a mano.html-minifier-terser CLI.Maurizio Fonte, consulente IT senior con oltre 20 anni di esperienza in PHP, Laravel, infrastrutture Linux, cybersecurity e integrazione AI/LLM in azienda. Backend di produzione, modernizzazione di codice legacy, audit di sicurezza, agenti AI e MCP server custom: il lavoro che sta dietro a questi strumenti.
Conosci Maurizio Fonte