JavaScript Lint and Minify

Dopo aver letto le 14 regole riportate da Steve Souders sul libro High Performance Web Sites ho investigato un po' sulla regola 10: "Minimizzare il codice JavaScript".

Il mio obbiettivo è di sviluppare una procedura batch (su Linux) che mi permetta di:

1. Unire tutti i JavaScript necessari, se possibile, in un solo file da includere alla fine della pagina (regola 1: "Ridurre le richieste HTTP")
2. Verificare che il codice JavaScript sia valido
3. Minimizzare il codice JavaScript
4. Verifica nuovamente per assicurarmi non siano comparsi errori o warning nel codice (non mi garantisce che sia tutto OK, ma aiuta)
5. Opzionalmente, fornire una versione packed del codice JS minimizzato

Per unire i file JavaScript è sufficiente un semplice cat, le parti interessanti sono relative alla verifica e alla minimizzazione del codice JavaScript. È proprio di queste ultimi due aspetti che tratterò

Verifica

Per verificare la correttezza del codice JavaScript il punto di riferimento al momento è JSLint.

Il validatore online che troviamo nella home page è ben fatto, ma non và assolutamente bene per i nostri scopi. Per mia fortuna è disponibile il codice sorgente e una variante di questo adatta ad essere eseguita con Rhino, un interprete JavaScript scritto in Java.

Per far funzionare il tutto abbiamo bisogno di due compomenti:

• il JAR di Rhino, che in genere si chiama js.jar
• il codice di JSLint per Rhino: jslint.js, che per comodità e per evitare confusioni chiamerò rhino-jslink.js.

La linea di comando da eseguire è molto semplice:

java -jar js.jar rhino.jslint.js input.js

In questo modo eseguiamo la verifica con i valori predefiniti. Nel caso volessimo configurare meglio il processo è sufficiente aggiungere un commento all'inizio del file JavaScript da verificare, con all'interno una sintassi del tipo:

/* jslink [opt:true|false]* */

Le opzioni possibili ed il loro significato è dettagliato nella documetazione di JSLint.

Per far funzionare JSLint con Rhino mi sono ispirato a questo post: http://wolfram.kriesing.de/blog/index.php/2007/getting-jslint-going, a cui vi rimando per approfondimenti.

Minimizzazione

Il codice JavaScript dovrebbe essere sempre ben indentato ed ampiamente commentato. Questo aiuta lo sviluppo, ma non è di nessuna utilità per il browser che dovrà interpretare il codice e, peggio, aumenta il tempo totale di caricamento delle pagine più di quanto sarebbe effettivametne necessasrio.
La soluzione è di sviluppare il codice JavaScript come ho descritto, ma poi di pubblicarne una versione minimizzata ed ottimizzata, a beneficio delle performance.

Sul libro si consigliava l'uso di JSMin, ma io ho preferito utilizzare YUI Compressor, implementato in Java, che dovrebbe essere equivalente, se non leggermente più performante ed in più è in grado di minimizzare anche i CSS (di cui parlerò separatamente).

L'unico requisito è di procurarsi il JAR di YUI Compressor da qui.

L'utilizzo è molto semplice:

java -jar yuicompressor.jar --type js --charset ANSI --preserve-semi --line-break 0 -o output.js input.js

Due delle opzioni meritano una piccola spiegazione:

--line-break

forza un'interruzione di interruzione di linea dopo N colonne, per facilitare la lettura e venire incontro a strumenti di controllo dei sorgenti che non gradiscono le linee troppo lunghe; nell'esempio ho impostato questo valore a 0 ad indicare di andare a capo dopo ogni punto e virgola

--preserve-semi

mantiene alcuni punti e virgola che non sarebbero strettamente necessari, per accontentare JSLint

Aggiungi a: | |