La minificazione di JavaScript viene spesso confusa con l'offuscamento, anche se sono due compiti diversi con obiettivi diversi: uno risparmia byte, l'altro rende la logica del codice più difficile da capire.
Cosa fa la minificazione
Il minificatore elimina spazi, commenti e a capo, e abbrevia i nomi delle variabili locali a uno o due caratteri ovunque sia sicuro farlo. La logica del programma resta completamente invariata — è una compressione puramente tecnica del file.
Da JSMin a Terser: una breve storia
Douglas Crockford rilasciò JSMin all'inizio degli anni 2000, uno dei primi minificatori JS ampiamente usati — si limitava a rimuovere spazi e commenti, senza toccare i nomi delle variabili. Strumenti moderni come Terser (un fork di UglifyJS) ed esbuild vanno oltre: analizzano il codice in un AST (albero sintattico astratto) e rinominano variabili locali e parametri delle funzioni in singole lettere ovunque sia sicuro farlo — ed è proprio questo passaggio, più della sola rimozione degli spazi, a incidere maggiormente sulla dimensione del file nei progetti reali.
Source map: come si esegue il debug di codice con variabili rinominate
Quando i nomi delle variabili si riducono a a, b e c, e ogni a capo è scomparso, uno stack trace in produzione punta a una posizione illeggibile all'interno di un'unica riga lunghissima. La source map risolve proprio questo problema: è un file separato che mappa ogni posizione nel codice minificato alla riga, colonna e nome di variabile originali, permettendo agli strumenti per sviluppatori del browser di mostrare uno stack trace leggibile anche se il browser sta effettivamente eseguendo il file minificato.
A cosa serve
- Ridurre la dimensione di un bundle JS prima del deploy in produzione.
- Velocizzare il download e il parsing dello script nel browser.
- Capire perché il codice minificato resta leggibile volendo, mentre quello offuscato è molto più difficile da interpretare.
Tree shaking contro minificazione
Il tree shaking è una tecnica distinta, da non confondere con la minificazione: analizza il grafo delle dipendenze tra moduli e rimuove completamente dal bundle finale, già in fase di build, funzioni ed export che non vengono mai usati. La minificazione, al contrario, lavora su codice già finito e ne accorcia solo la rappresentazione testuale, senza rimuovere alcuna logica effettivamente eseguita. I bundler moderni come Vite o webpack applicano di solito entrambe le tecniche in sequenza: prima il tree shaking elimina il codice morto, poi la minificazione comprime ciò che resta.