Minifica JavaScript _

Come funziona la minificazione JavaScript

Terser lavora in quattro fasi sull’Abstract Syntax Tree del tuo codice. Ogni fase è indipendente, quindi puoi attivarne o disattivarne qualsiasi senza rompere le altre.

1. Parsing. Terser analizza il tuo JavaScript in un AST. Qualsiasi errore di sintassi emerge qui con il token e la riga che lo hanno causato, così trovi il problema reale prima che venga eseguita qualsiasi trasformazione. Il parser accetta ogni costrutto ECMAScript standard fino alle ultime proposte in stage 4.
2. Compressione. Il compressore percorre l’AST e applica decine di trasformazioni che preservano la semantica: costant folding, eliminazione dei rami morti, inlining di funzioni pure brevi, collasso di dichiarazioni var sequenziali e riscrittura di forme di istruzione equivalenti (if/else in ternari, accorciamento di catene di confronto, collasso del return condizionale). Ogni trasformazione è invertibile in linea di principio; il compressore non cambia mai il comportamento osservabile.
3. Mangling. Il mangler rinomina i binding locali agli identificatori univoci più brevi (a, b, c, …) all’interno di ogni scope. Vengono rinominati solo i nomi che non possono sfuggire al confine del modulo, quindi i binding esportati, le chiavi delle proprietà e i riferimenti globali sopravvivono intatti. Il risultato è il maggiore risparmio di byte singolo tra tutte le fasi.
4. Rendering. Terser stampa l’AST trasformato in una stringa JavaScript con gli spazi bianchi compressi e i separatori di istruzione ridotti al minimo che la grammatica accetta. I commenti vengono rimossi a meno che l’interruttore preserve-license non mantenga i blocchi /*! … */, che la maggior parte delle licenze CDN richiede di conservare.

Perché minificare JavaScript

• Caricamento delle pagine più veloce. Gli script più piccoli vengono analizzati ed eseguiti prima. Su una connessione mobile 4G una riduzione del 40 percento dei byte riduce di secondi reali il Time to Interactive, che è la metrica che Google’s PageSpeed Insights misura più aggressivamente.
• Fatture di egress CDN ridotte. CloudFront, Cloudflare e Fastly addebitano per gigabyte di egress. Una riduzione del 40 percento degli script su milioni di visualizzazioni di pagine mensili si accumula in risparmi reali prima che arrivi qualsiasi lavoro su immagini o CSS. Il calcolo vale anche dopo gzip e brotli — la minificazione rimuove i token che altrimenti il compressore dovrebbe codificare.
• Questo minificatore non appesantisce la tua pagina. Terser pesa circa 1 MB non compresso. La maggior parte dei minificatori online carica l’intera libreria al caricamento della pagina, il che fa crollare il loro stesso punteggio Lighthouse e rende la pagina lenta prima che l’utente digiti qualcosa. Questa pagina carica Terser in modo lazy solo quando fai clic su Minifica o attivi la modalità live — così il rendering iniziale rimane sotto le soglie dei Core Web Vitals che lo strumento stesso promette di aiutarti a raggiungere.
• Superare i Core Web Vitals. Lighthouse e PageSpeed Insights segnalano il JavaScript di grandi dimensioni come contribuente diretto a uno scarso Total Blocking Time. Minificare le librerie vendor e i bundle applicativi è la vittoria più rapida negli audit di Lighthouse "Riduci JavaScript non utilizzato" e "Rimuovi moduli duplicati" — solitamente una riduzione una-tantum che vale dieci o venti punti.

Applicazioni comuni

La minificazione JavaScript compare in quasi ogni fase di un progetto web moderno.

• Hook pre-commit: minifica singoli script di utilità prima di eseguire il commit in un repository in modo che l’artefatto committato sia pronto per la produzione e il diff mostri le modifiche alla logica piuttosto che le variazioni di spazi bianchi.
• Audit di widget di terze parti: incolla lo snippet di incorporamento di un vendor e controlla se è già minificato o se può essere ulteriormente ridotto prima di servirlo a milioni di utenti.
• Pulizia di script legacy: comprimi i vecchi plugin jQuery e gli script scritti a mano che precedono la tua pipeline di build attuale, senza toccare l’albero dei sorgenti.

Un esempio pratico

Prendi una piccola funzione: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — circa 130 byte incluso il commento. Incollala sopra con Mangle e Compress entrambi attivi. L’output si accorcia a circa function add(n,o){return n+o}console.log(add(1,2)); — circa 55 byte, una riduzione del 58 percento. Il nome della funzione add sopravvive perché viene referenziato nella chiamata console.log; i nomi dei parametri firstNumber e secondNumber si accorciano a singole lettere perché sono locali al corpo della funzione. Disattiva Mangle per mantenere nomi di parametri leggibili pur comprimendo gli spazi bianchi e rimuovendo il commento.

FAQ

Questo funziona nel mio browser?

Sì. Terser viene caricato in modo lazy la prima volta che fai clic su Minifica o attivi la modalità live — circa 200 KB compressi arrivano nella cache del tuo browser, poi non viene scaricato altro. Il tuo codice non lascia mai la pagina.

Cos’è il name mangling ed è sicuro?

Il mangling rinomina le variabili locali in singole lettere per risparmiare byte. È sicuro per gli script autonomi e i bundle IIFE perché i ridenominazioni non escono mai dallo scope. NON è sicuro per gli script che espongono globali per nome (es. window.myLib = …) senza un wrapper. Disattiva Mangle se non sei sicuro.

Perché il mio codice si è rotto dopo la minificazione?

Tre sospettati abituali: eval o with che fanno riferimento a variabili per stringa; letture di Function.name o arguments.callee che dipendono dall’identificatore originale; o globali esposte con un nome che è stato rinominato. Disattiva prima Mangle per isolare se la rinominazione o una trasformazione Compress è la causa.

Supporta la sintassi moderna (ES2020+)?

Sì. Imposta il target ECMAScript su ES2020 o Next e Terser preserva il chaining opzionale, il nullish coalescing, l’await di primo livello e gli operatori logical-assignment. Impostalo su ES5 e Terser effettua una down-compilation dove può, ma non è un transpiler completo — usa Babel per la sintassi che ES5 non può rappresentare affatto.

La minificazione JavaScript lato browser con Terser ti offre un output di qualità produzione senza aggiungere uno strumento di build. Incolla uno script, scegli il target ECMAScript, copia o scarica il risultato. Nulla viene caricato, nessun account, nessuna pipeline di build. Il minificatore stesso si carica solo quando glielo chiedi — quindi aprire questa pagina ti costa pochi kilobyte, non un megabyte.