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à