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

Verifichiamo che l’installazione sia andata a buon fine

Installazione di Java su Linux basati su Ubuntu o Debian

Per installarlo, ci affidiamo al gestore pacchetti APT

Verifichiamo che l’installazione sia andata a buon fine

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

Minimizziamo un file

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

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

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

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

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