La minificazione รจ un processo abbastanza diffuso nellโimplementazione delle librerie per il coding nellโambito del web-publishing. Si pensi per esempio ad un framework JavaScript come jQuery del quale vengono distribuite due differenti release: una completa (dev
), indicata soprattutto agli sviluppatori che desiderano lavorare sul progetto stesso, e una minificata piรน performante perchรจ piรน "leggera", da utilizzare per i siti Internet e la applicazioni in fase di produzione.
Cosโรจ la minificazione (o minimizzazione) del codice?
La minificazione รจ un processo attraverso il quale un codice sorgente viene ridotto ai minimi termini attraverso un algoritmo che ne riduce la dimensione senza alterarne il funzionamento.
Come funziona la minificazione del codice?
Gli aspetti piรน semplici della minificazione riguardano lโeliminazione degli spazi inutili e dei ritorni a capo, sulla compressione dei nomi di variabile troppo lunghi e lโeliminazione di commenti ed elementi sintattici inutili (come ad esempio alcune parentesi o punti e virgola), ma non solo! Le soluzioni per la minificazione del codice JavaScript, infatti, sono in grado di parsare i sorgenti scritti in questo linguaggio, identificare le componenti non indispensabili per una corretta esecuzione degli script e restituire in output un codice depurato da tutti quelli elementi che gravano inutilmente sui tempi di caricamento e, di conseguenza, sulle prestazioni di una Web application.
In altre parole, attraverso il processo di minificazione, il codice Javascript mantiene inalterato le sue caratteristiche funzionali pur venendo ridotto di dimensioni.
Pro e contro del processo di minificazione
La minificazione del codice javascript, ma in generale ogni processo in grado di ridurre il "volume" dei sorgenti (soprattutto nellโambito del web-publishing) comporta il vantaggio di velocizzare i tempi di caricamento (il browser dovrร scaricare meno dati ed il client dovrร "leggere" meno codice) riducendo le attese degli utilizzatori.
Tale processo, tuttavia, comporta una perdita (a volte anche importante) in termini di leggibilitร e chiarezza del codice sorgente. Per questo motivo il processo di minificazione attiene esclusivamente alla fase di produzione e non รจ adatto alle distribuzioni dedicate agli sviluppatori i quali trovererebbero estremamente difficoltoso "mettere le mani" su un codice compresso e privo di commenti.
Come effettuare la minificazione di un sorgente Javascript?
Esistono diverse librerie per effettuare la minificazione di un codice sorgente scritto in Javascript, le piรน famose tra queste sono UglifyJS, Google Closure Compiler, YUI, Minify e Butternut.
UglifyJS
Con una media di 15 milioni di download ogni settimana, UglifyJS รจ uno dei minificatori Javascript piรน conosciuti e utilizzati dagli sviluppatori di tutto il mondo. Da questa pagina รจ possibile scaricare un pacchetto NPM che รจ possibile installare attraverso riga di comando:
npm install -g uglify-js
Il tool รจ ricco di funzionalitร interessanti tra cui la possibilitร di unire piรน file Javascript in un unico file minimizzato.
Google Closure Compiler
La libreria di casa Google รจ tra le piรน efficenti a disposizione degli sviluppatori. Essa รจ in grado di rimuovere il codice ridondante, valutare lโintera struttura del codice e riscriverla in modo piรน efficiente. Integra al suo interno anche una serie di strumenti di controllo del codice che facilitano il lavoro degli sviluppatori durante il debug delle loro applicazioni.
La pagina ufficiale del progetto รจ raggiungibile qui. Il sorgente puรฒ essere scaricato da Github cliccando qui.
YUI
Nato dai laboratori di Yahoo!, YUI Compressor รจ un tool scritto in Java รจ in grado di fornire ottime performances nella minimizzazione sia di codice javascript che CSS. Fruibile da riga di comando, YUI effettua la compressione del codice in modo molto veloce e con un tasso di compressione tra i piรน alti del mercato. Da segnalare la presenza, non scontata, di una documentazione ricca e di facile lettura (anche da terminale).
Per funzionare รจ necessario che sia installato Java. Per effettuare lโinstallazione sarร sufficiente scaricare lโarchivio e digitare:
java -jar yuicompressor-x.y.z.jar
Minify
Unโaltra libreria molto conosciuta per la compressione del codice sorgfente รจ Minify. Essa รจ in grado di comprimere non solo Javascript, ma anche HTML e CSS. Puรฒ essere installata facilemnte tramite NPM con questa semplice istruzione:
npm i minify -g
Il suo funzionamento comprende sia lโutilizzo da linea di comando
$ minify hello.js > hello.min.js
che attraverso una API che ne consente una facile integrazione allโinterno di progetti Javascript.
var minify = require('minify');
minify('client.js', 'stream', function(error, stream) {
var streamWrite = fs.createWriteStream('client.min.js');
if (error)
console.error(error.message);
else
stream.pipe(streamWrite);
});
Butternut
Butternut รจ nato alcuni anni fa per offrire uno strumento che sia significativamente piรน veloce rispetto agli altri minificatori per JavaScript in circolazione; i test effettuati dal suo developer avrebbero evidenziato tempi di esecuzione circa 4 volte inferiori rispetto a quelli di UglifyJS e tra le 10 e le 15 volte migliori se confrontati con quelli di unโaltra soluzione molto conosciuta come Babili.
La libreria presenta inoltre il vantaggio di essere compatibile con le specifiche piรน recenti per JavaScript, supporta infatti ECMAScript 6 (ES2015) e tutte le feature che sono state introdotte nel linguaggio tramite questo aggiornamento.
Purtroppo si tratta di un progetto archiviato e non piรน supportato dal suo sviluppatore, tuttavia resta ancora oggi unโottima soluzione per la minificazione.
Il suo utilizzo รจ particolarmente semplice, lโinstallazione avviene tramite package manager npm, e si puรฒ scegliere se effettuare le operazioni di minificazione tramite istruzioni da linea di comando (comando squash
):
npm install --global butternut # o npm i -g butternut squash nome-app.js > nome-app.min.js
o in modalitร "live", direttamente nella propria applicazione:
npm install --save-dev butternut # or npm i -D butternut
const butternut = require('butternut');
const { code, map } = butternut.squash(nome-app.js, opzioni);
Effettuare la minificazione del codice mediante un tool on-line
Se il processo di minificazione รจ estemporaneo e non si ha lโesigenza di implementare soluzioni "integrate", la scelta di utilizzare uno dei tanto tool on-line appre sicuramente vincente. Non cโรจ nulla da installare, basta copiare ed incollare il codice sorgente che si vuole comprimere allโinterno di una textarea, selezionare eventuali impostazioni e cliccare su un pulsante per avere un codice Javascript minimizzato a costo e fatica zero.
JSCompress
Offre la possibilitร di effettuare l minimizzazione di un codice Javascript attraverso il semplice copia incolla del codice sorgente originario. Supporta le novitร di ECMAScript 2021.
Maggiori info: jscompress.com
Javascript-Minifier
Questo strumento on-line consente di effettuare la compressione di un codice Javascript in modo estremamente semplice e senza dover scaricare ed installare nulla sul proprio computer.
Maggiori info: javascript-minifier.com
UglifyJS 3: online
Versione online della popolare libreria.
Maggiori info: skalman.github.io/UglifyJS-online/
Conclusioni
La minimizzazione del codice รจ una tecnica di ottimizzazione delle performance che ogni web developer dovrebbe adottare per siti web ed app in produzione. Il mercato offre svariate soluzioni open-source e strumenti online con cui soddisfare questa esigenza in modo semplice ed immediato.