Panoramica / Sviluppo e codice / Minificatore di codice
Sviluppo e codice 100% nel browser e offline

Minificatore di codice

Minifica JavaScript con Terser e CSS con csso nel browser, con il risparmio in byte e in gzip.

Incolla o scrivi l'input; il risultato appare subito e gli errori sono mostrati sotto.

I tuoi file e dati non lasciano mai il browser: non viene caricato nulla.

Opzioni

I nomi di primo livello restano invariati finché non attivi il loro accorciamento. Quell'opzione può rompere script che si chiamano tra file diversi o usano variabili globali dell'HTML. I commenti di licenza iniziano con /*! oppure contengono @license o @preserve. La versione indica la sintassi più recente che Terser può scrivere. Rimuovere console e debugger richiede "Comprimi il codice".

Limiti: 2.000.000 di caratteri. Le dimensioni sono byte UTF-8. La riga gzip compare solo se il browser ha CompressionStream. L'HTML non viene minificato. Minificare cambia il codice, quindi prova il risultato prima di pubblicarlo. Il codice viene elaborato in questa pagina e non viene inviato da nessuna parte.

Minificare JavaScript e CSS senza una pipeline

Un tema WordPress con un foglio di stile da 120 KB, un widget incollato nel footer: non vale la pena montare un bundler per così poco. Incolla qui il codice e ottieni la versione minificata. JavaScript passa da Terser, CSS da csso.

Passaggi

  1. Scegli JavaScript o CSS in alto.
  2. Sostituisci l'esempio con il tuo codice. Il risultato si aggiorna circa 300 ms dopo l'ultimo carattere digitato.
  3. Imposta le opzioni, per esempio Accorcia i nomi delle variabili o Rimuovi le istruzioni debugger.
  4. Premi Copia oppure Scarica: il file si chiama script.min.js o styles.min.css.

Le opzioni per JavaScript

Terser può comprimere il codice (espressioni più corte, codice morto eliminato) e accorciare i nomi. Variabili locali e parametri vengono accorciati quando lo chiedi. I nomi di primo livello restano invece intatti: un altro script o un onclick nell'HTML potrebbe chiamarli per nome. Attiva l'accorciamento solo se il file è autonomo.

Con Mantieni i nomi di classi e funzioni conservi i nomi che leggi con .name o che servono negli stack trace. La versione (ES2015, ES2017, ES2020, ES2022) limita la sintassi che Terser può scrivere. I commenti si possono rimuovere tutti, tenere solo se di licenza (/*!, @license, @preserve) oppure tenere tutti.

Cosa fa csso al foglio di stile

csso trasforma margin: 0px 0px 0px 0px in margin:0, accorcia i colori e toglie i commenti. Con Ristruttura le regole unisce anche le regole che hanno dichiarazioni uguali. Se il tuo layout dipende dall'ordine delle regole, disattivala. Le proprietà personalizzate e i blocchi @media restano.

Limiti e dati

L'input può avere al massimo 2.000.000 di caratteri. Le dimensioni sono in byte UTF-8. La riga gzip compare solo se il browser ha CompressionStream. Un errore di sintassi in JavaScript mostra riga e colonna; csso invece non segnala errori CSS e una parte rotta può sparire senza messaggio. L'HTML non viene minificato.

Minificare cambia il codice e per il codice insolito non c'è garanzia di comportamento identico: prova il file prima di pubblicarlo. Terser e csso girano nel tuo browser. Al primo uso la pagina scarica il file della libreria dal proprio server, come mostra la scheda rete. In seguito, premendo un pulsante non viene inviato nulla. Il codice non viene caricato e non viene eseguito.

Domande frequenti (FAQ)

Solo se nulla fuori dal file usa quei nomi. Gli onclick nell'HTML e gli altri script che chiamano le tue funzioni smetterebbero di funzionare, per questo l'opzione è disattivata di default.