Ricerca nel sito web

Come comprimere e minimizzare CSS e JavaScript dalla riga di comando

Per web designer, editori e sviluppatori, non si può sottolineare abbastanza l'importanza di mantenere le pagine web o le applicazioni web il più leggere possibile. Esistono varie strategie di progettazione e tecniche lato client/server che possono essere sfruttate per raggiungere questo obiettivo.

Una tecnica relativamente semplice e diretta è la "minificazione del codice". Questo è il processo di eliminazione dei caratteri non necessari (ad esempio spazi bianchi, nuove righe, commenti, delimitatori opzionali) dal codice sorgente, "comprimendo" così la dimensione del codice sorgente a scapito della leggibilità umana. Il codice CSS o JavaScript viene comunemente minimizzato per ridurre la quantità di byte trasferiti dall'utente da un server.

Lo strumento più noto per minimizzare CSS e JavaScript è YUI Compressor, che fa parte della libreria JavaScript YUI (Yahoo! User Interface) scritta da Yahoo! sviluppatori. I casi d'uso comuni di YUI Compressor sono in combinazione con altri strumenti di creazione come Apache Ant o Maven, in cui le applicazioni Web vengono create automaticamente minimizzate con l'aiuto di YUI Compressor.

YUI Compressor può anche essere utilizzato da solo per comprimere manualmente i file CSS/JavaScript. In questo tutorial, descriverò come comprimere CSS o JavaScript dalla riga di comando su Linux utilizzando YUI Compressor.

Installa YUI Compressor su Linux

YUI Compressor è scritto in Java e il suo file JAR predefinito (così come il suo codice sorgente) è disponibile per il download. Qui useremo l'eseguibile JAR.

Innanzitutto, installa Java runtime, necessario per eseguire YUI Compressor.

Scarica e installa YUI Compressor come segue.


$ sudo mkdir -p /usr/share/java
$ sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar -P /usr/share/java

Crea uno script di avvio denominato yc, con il seguente contenuto.


$ sudo vi /usr/bin/yc


#!/bin/sh
java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"


$ sudo chmod +x /usr/bin/yc

Ora puoi usare il comando yc per lanciare YUI Compressor.


$ yc


YUICompressor Version: 2.4.8

Usage: java -jar yuicompressor-2.4.8.jar [options] [input file]

Global Options
  -V, --version             Print version information
  -h, --help                Displays this information
  --type            Specifies the type of the input file
  --charset        Read the input file using 
  --line-break      Insert a line break after the specified column number
  -v, --verbose             Display informational messages and warnings
  -o                  Place the output into . Defaults to stdout.
                            Multiple files can be processed using the following syntax:
                            java -jar yuicompressor.jar -o '.css$:-min.css' *.css
                            java -jar yuicompressor.jar -o '.js$:-min.js' *.js

JavaScript Options
  --nomunge                 Minify only, do not obfuscate
  --preserve-semi           Preserve all semicolons
  --disable-optimizations   Disable all micro optimizations

If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.

Comprimi CSS o JavaScript dalla riga di comando

Per comprimere o minimizzare un file CSS, utilizzare il seguente comando:


$ yc default.css -o default-min.css

Controlla la dimensione ridotta prima e dopo la compressione CSS:


$ wc default.css default-min.css


  756  1097 14007 default.css
    0   163  5745 default-min.css

In questo esempio, il numero totale di byte per il file CSS originale viene ridotto da 14 KB a 5,7 KB dopo la compressione.

Un file CSS compresso/minificato ha il seguente aspetto:

Per comprimere o minimizzare JavaScript, puoi procedere in modo simile.


$ yc sample.js -o sample-min.js

Articoli correlati: