devdev / in the loop

Minimizzare CSS e Javascript con lo YUI Compressor

Lo YUI Compressor è uno strumento molto valido per alleggerire i file Javascript e CSS che serviamo agli utenti: è possibile cioè ridurne il peso tra il 20 e il 50% senza intaccarne le funzionalità, così da poterli integrare nei nostri progetti in piena sicurezza.

Esistono varie librerie dedicate alla minimizzazione, ma lo YUI Compressor resta quella con un maggior focus sulla riduzione di peso, che è il fattore che ci interessa maggiormente quando vogliamo ottenere le massime performance in termini di velocità di caricamento dell’intero sito.

Come funziona?

Lo YUI Compressor è scritto in Java, ed è basato sulla libreria open source Rhino, che serve per “far leggere” Javascript a Java stesso. Il sistema di compressione inizia analizzando il file leggendo il codice che abbiamo scritto. Cambia poi i nomi di variabili e funzioni sostituendoli con nomi più brevi dove possibile. Infine, toglie più spazi bianchi possibili e rimuove tutti i commenti. Pare poca cosa, ma in termini di velocità otterremo grandi benefici, ve lo assicuro. Vediamo come usarlo.

Installazione di Java

Per eseguirlo, abbiamo bisogno di avere installato Java JRE (Java Runtime Environment) sul nostro sistema. Se lo avete già fatto, passate al punto successivo.

Installazione di Java su Linux basati su Red Hat, CentOS o Fedora

Per installarlo, ci affidiamo al gestore pacchetti yum

sudo yum install java-1.8.0-openjdk

Verifichiamo che l’installazione sia andata a buon fine

java -version

Installazione di Java su Linux basati su Ubuntu o Debian

Per installarlo, ci affidiamo al gestore pacchetti APT

sudo apt-get install openjdk-8-jre

Verifichiamo che l’installazione sia andata a buon fine

java -version

Installazione di Java su Windows

Procedete al download dal sito ufficiale ed installate il pacchetto. Al termine, riavviate la macchina.

Download di YUI Compressor

A questo punto non ci rimane che scaricare l’ultima versione del compressore, che consiste in un singolo file .jar, dalla pagina download ufficiale. Scarichiamo il pacchetto, manualmente oppure tramite il comando wget

wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

Minimizziamo un file

A questo punto possiamo già utilizzare lo YUI Compressor, testiamolo quindi su un file javascript.

java -jar yuicompressor-2.4.8.jar file.js -o file-min.js

Abbiamo eseguito l’applicativo indicandogli come input il file file.js  e come file output avremo la sua versione minimizzata nel file file-min.js . Il tipo di compressione (Javascript o CSS) è basato sull’estensione del file che stiamo minimizzando (.js oppure .css). Se i file che intendiamo processare non hanno una di queste estensioni, possiamo forzare il compressore ad un interpretare il tipo, usando l’opzione –type js oppure –type css

java -jar yuicompressor-2.4.8.jar filejavascript.txt -o file-min.js --type js

In questo caso un file javascript ha estensione .txt: diciamo al compressore di trattarlo come fosse un javascript (.js) e di mettere l’output minimizzato nel file file-min.js.

Opzioni disponibili

È possibile modificare il comportamento del compressore usando una o più opzioni. Per consultare la lista delle opzioni disponibili, digitiamo

java -jar yuicompressor-2.4.8.jar -h

Una delle più interessanti è sicuramente la modalità verbose che ci permette di ottenere dei piccoli suggerimenti su come ottimizzare il codice. Ad esempio, quando dichiariamo una variabile che non utilizziamo successivamente. Per abilitare la modalità verbose, aggiungiamo l’opzione –verbose

java -jar yuicompressor-2.4.8.jar file.js -o file-min.js --verbose

Fatto. Se volete soltanto provare lo YUI Compressor o utilizzarlo saltuariamente, sono disponibili diversi tool che vi permettono di utilizzarlo online, come questo.

Questo articolo ti è stato utile?
Javascript – LETTURA 4 MINUTI Alternativa a jQuery .eq() in Javascript
Una delle funzioni di traversing più utili di jQuery è sicuramente .eq() . Ci permette di accedere ad un elemento di…
Javascript – LETTURA 4 MINUTI Come conoscere la posizione di un elemento con jQuery index o in vanilla Javascript
Il motto di jQuery è “Write less, do more”, anche se gli ultimi anni stiamo vedendo uno shifting di molte…
Javascript – LETTURA 6 MINUTI Utilizzare i parametri GET in Javascript con URLSearchParams
I parametri URL, che tutti conosciamo come parametri GET o query) vengono utilizzati per passare informazioni alla pagina che stiamo…
Javascript – LETTURA 4 MINUTI Aggiungere una regola CSS con Javascript
Aggiungere una regola CSS in modo dinamico con Javascript può esserci utile in vari casi: uno riguarda sicuramente le performance,…
Roba figa da
if (weekend) {
    relax();
}
la nostra newsletter, ogni tanto.