YUI Compressor: minimizzare i file CSS e Javascript

di Giulio di Bari :: 09 ottobre 2020

Lo YUI Compressor è uno strumento molto valido per alleggerire i file Javascript e CSS presenti nel nostro sito e quindi velocizzare la visualizzazione delle pagine web del nostro sito.

Esistono varie librerie dedicate alla minimizzazione (a fondo pagina troverete dei link ad altri articoli in cui trattiamo questo argomento con altri strumenti), ma lo YUI Compressor può essere considerata la libreria che consente la maggior compressione e quindi ci consente di ottenere le massime performance in termini di velocità di caricamento delle pagine web.

Come funziona

Lo YUI Compressor è scritto in Java, ed è basato sulla libreria open source Rhino, ed opera in questo modo:

analizzando il file, leggendo il nostro codice css o js
cambia nomi delle variabili e delle funzioni sostituendoli con nomi più brevi, dove possibile
toglie più spaziature bianchi possibili e rimuove i commenti.

Installazione di Java

Per eseguirlo, abbiamo bisogno di avere installato Java JRE (Java Runtime Environment) sul nostro sistema.

Noi utilizziamo un server linux Centos e per installarlo utilizziamo il gestiore di pacchetti yum digitando quanto segue

# yum install java-1.8.0-openjdk

Mentre su sistemi Debian e Ubuntu utilizziamo il gestore pacchetti APT

# apt-get install openjdk-8-jre

Verifichiamo che l’installazione sia andata a buon fine

# java -version

Sui sistemi Windows scaricate il pacchetto dal sito ufficiale Java.

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 ufficiale.

Scarichiamo il pacchetto, manualmente oppure in linux tramite il comando wget

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

Minimizziamo un file

Vediamo come effettuare la compressione di un file javascript:

# java -jar yuicompressor-2.4.8.jar esempio.js -o esempio-min.js

Abbiamo indicando come input il file "esempio.js" e come file di output avremo la sua versione minimizzata "esempio-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".

Ad esempio se abbiamo un file javascript con estensione .txt, diciamo al compressore di trattarlo come fosse un javascript (.js) utilizzando l'opzione "--type js"

# java -jar yuicompressor-2.4.8.jar esempio.txt -o esempio-min.js --type 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.

Per abilitare la modalità verbose, aggiungiamo l’opzione "–verbose"

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

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

Approfondimenti

Documentazione ufficiale