back to top

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

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.

Altri contenuti interessanti

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Il file manifest.json: cosโ€™รจ e a cosa serve

Il file manifest.json รจ un componente chiave nelle applicazioni web moderne,...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll รจ una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale รจ un identificativo tributario univoco che...

Math.ceil() โ€“ Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript รจ utilizzato...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...

6 video player HTML5 per il tuo sito web

Con il rilascio delle specifiche definitive per HTML5 molte...
Pubblicitร