Encoders & Utilities

Minifier CSS / JS

Minifica CSS o JavaScript: rimuove commenti e spazi con autodetect, statistiche byte e copia/scaricamento.

What this does

  • CSS — strips /* comments */, collapses whitespace, removes trailing semicolons, tightens punctuation.
  • JavaScript — strips // line and /* block */ comments, collapses whitespace, tightens braces and parens. Preserves string and template literals.

Note: this is a safe regex minifier — no variable renaming (mangling) and no dead-code elimination. Use Terser / esbuild in your build pipeline for production-grade compression.

Informazioni su questo strumento

CSS / JS Minifier rimuove tutto ciò di cui il browser non ha bisogno: commenti, spazi bianchi ridondanti, punti e virgola finali e (per il CSS) unità opzionali dopo lo zero. Si incolla il file o lo si trascina sulla pagina; lo strumento rileva automaticamente se si tratta di CSS o JavaScript e applica il set di regole appropriato. La dimensione originale e quella minificata sono mostrate affiancate con la percentuale risparmiata.

Per il CSS seguiamo un set di regole conservativo — sicuro su tutti i browser, nessun cambio di specificità, nessuna riscrittura di shorthand che potrebbe alterare il comportamento della cascata. Per JavaScript il minifier rimuove i commenti e collassa gli spazi bianchi ma non rinomina variabili né manipola identificatori (richiederebbe un parser e rischia di rompere eval / accesso a proprietà dinamiche). Per la minificazione aggressiva (terser, esbuild, swc) si usi uno strumento build-time; questo è lo strumento giusto per attività rapide del tipo "rendere questo più piccolo prima di incollarlo in un'email".

Quando usare questo strumento

  • Quick win pre-deploy. Un piccolo <style> o <script> inline che non passa attraverso il bundler beneficia comunque della minificazione.
  • Template email e AMP. Il CSS inline raggiunge limiti di dimensione; rimuovere gli spazi può risparmiare il 30–40%.
  • Copia-incolla in config. Snippet JS lunghi in file di config YAML o JSON diventano molto più leggibili una volta minificati.
  • Verifica del risparmio in byte prima di impegnarsi in un cambio di build tool.

Cosa deliberatamente non facciamo

Nessun rinominamento di variabili, nessuna eliminazione di codice morto, nessuna riscrittura di espressioni. Queste modifiche possono rompere codice che si basa su nomi di identificatori (debug, monkey-patching, this dinamico), e le garanzie di sicurezza richiedono un parser completo AST-aware. Per build di produzione si usi terser o esbuild; i risparmi sono maggiori ma la superficie di sicurezza è molto più ampia. Questo strumento offre il facile 50% con rischio zero.

Domande frequenti

Quanto sarà più piccolo il mio file?

Risparmi tipici: 30–50% per il CSS, 20–40% per JavaScript. I file sorgente pesantemente commentati possono raggiungere risparmi del 60%+. Gli input già minificati ottengono pochi benefici (il minifier viene comunque eseguito in modo idempotente — eseguirlo due volte non rompe nulla). Per risparmi più aggressivi, abbinare con compressione gzip/brotli a livello server, che è moltiplicativa con la minificazione.

Funziona con TypeScript?

Non direttamente — TypeScript non è JavaScript valido e il nostro minifier si aspetta JS. Compila prima il tuo TS in JS (tsc, esbuild, swc) e minifica l'output. Per sorgente annotato con tipi, uno strumento TS-aware come esbuild o swc esegue sia lo stripping dei tipi sia la minificazione in un unico passaggio ed è la scelta giusta.

Il CSS minificato romperà il mio layout?

No — il minifier preserva esattamente la specificità dei selettori, l'ordine delle proprietà e la struttura delle at-rule. L'unico cambio comportamentale è il collasso degli spazi bianchi e la rimozione dei commenti, che il CSS tratta entrambi come insignificanti. Se si vede una differenza visiva dopo la minificazione, si è incappati in un bug — segnalare con l'input.

Funziona per le source map inline?

Le rimuove (il commento //# sourceMappingURL= è un commento e scompare). Per la produzione di solito si vuole generare un file .map separato accanto all'output minificato, servito in modo condizionale. Il nostro strumento non genera source map — richiede un parser completo ed è responsabilità di una pipeline di build. Per quel workflow si usi esbuild / terser.