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.
