JavaScript Minifier — Minificatore JavaScript

Come funziona la minificazione di JavaScript

La minificazione rende JavaScript più leggero senza cambiarne il comportamento. Questo strumento usa Terser, un minificatore maturo che analizza il codice trasformandolo in un albero sintattico astratto, lo ottimizza e lo ristampa senza spazi e commenti superflui. La fase compress applica decine di ottimizzazioni: elimina il codice irraggiungibile e le variabili inutilizzate, incorpora le costanti, unisce le dichiarazioni di variabili consecutive, trasforma quando possibile le istruzioni if in espressioni condizionali più brevi e calcola in anticipo le espressioni costanti semplici. La fase mangle rinomina poi variabili locali, parametri e nomi di funzione con una o due lettere. I nomi delle proprietà e le variabili globali restano invariati, quindi il comportamento pubblico del codice non cambia.

I badge delle dimensioni mostrano il peso in byte UTF-8 di input e output e la percentuale risparmiata. Il codice scritto a mano si riduce in genere del 40–70%; il codice già compatto o composto soprattutto da stringhe lunghe si riduce meno. Ricorda che i server di solito comprimono di nuovo JavaScript con gzip o Brotli, quindi il risparmio reale nel trasferimento è inferiore al valore grezzo, ma il codice minificato viene comunque analizzato più velocemente e consuma meno banda.

Scegliere le opzioni giuste

L'opzione ECMAScript target indica a Terser quale sintassi può usare nell'output. Con ES2020 può generare arrow function, optional chaining e altre forme moderne; con ES5 evita di introdurre sintassi più recente, anche se non traspila il codice moderno che hai scritto: per questo serve uno strumento come Babel o esbuild. Keep console.* conserva i log, utile per le build di staging. Attiva ES module per i file che usano import/export; permette anche di abbreviare i nomi di primo livello, perché lo scope del modulo è privato.

Privato per progettazione

Il minificatore viene caricato solo quando serve e funziona in locale, quindi il tuo codice sorgente non viene mai caricato online. È perciò adatto a piccoli interventi occasionali, come ridurre uno script inline, un bookmarklet o uno snippet per un tag manager di terze parti. Se Terser segnala un errore di sintassi, il messaggio indica riga e colonna, così puoi correggere l'input. Per i bundle di produzione mantieni la minificazione nella pipeline di build, in modo che sia ripetibile, e genera le source map per il debug.