Compressione dei file con l'API Closure Compiler Service

Panoramica

La comunicazione con l'API descriveva le nozioni di base sulla comunicazione con il servizio di chiusura Closure Compiler, ma illustrava l'utilizzo del servizio solo per rimuovere i commenti da un'unica riga di JavaScript. Questo tutorial illustra come utilizzare il servizio di chiusura sondaggio in uno scenario di sviluppo più realistico: elaborare un intero file JavaScript per ottenere una riduzione significativa delle dimensioni.

Questo tutorial presuppone che tu abbia una conoscenza di base di JavaScript e HTTP. Anche se utilizza uno script Python per inviare JavaScript al servizio Closure Compiler, non è necessario conoscere Python per seguire l'esempio.

1. Compressione di un file
2. Migliora la compressione
   1. Quanto è più piccolo il codice?
   2. In che modo il servizio di chiusura delle chiusure ha reso il programma più piccolo?
3. Passaggi successivi

Compressione di un file

L'esempio in Comunicazione con l'API ha trasmesso una stringa JavaScript come parametro della riga di comando al nostro script di compilazione. Tuttavia, questo approccio non funzionerà molto bene per un programma JavaScript di dimensioni reali, poiché la stringa JavaScript diventa rapidamente ingombrante quando il codice è più lungo di alcune righe. Per i programmi più grandi puoi utilizzare il parametro di richiesta code_url per specificare il nome di un file JavaScript da elaborare. Puoi utilizzare code_url in aggiunta a js_code o come sostituzione di js_code.

Ad esempio, considera il seguente programma JavaScript:

/**
 * A simple script for adding a list of notes to a page. The list diplays
 * the text of each note under its title.
 */

/**
 * Creates the DOM structure for a note and adds it to the document.
 */
function makeNoteDom(noteTitle, noteContent, noteContainer) {
  // Create DOM structure to represent the note.
  var headerElement = document.createElement('div');
  var headerText = document.createTextNode(noteTitle);
  headerElement.appendChild(headerText);

  var contentElement = document.createElement('div');
  var contentText = document.createTextNode(noteContent);
  contentElement.appendChild(contentText);

  var newNote = document.createElement('div');
  newNote.appendChild(headerElement);
  newNote.appendChild(contentElement);

  // Add the note's DOM structure to the document.
  noteContainer.appendChild(newNote);
}

/**
 * Iterates over a list of note data objects and creates a DOM
 */
function makeNotes(data, noteContainer) {
  for (var i = 0; i < data.length; i++) {
    makeNoteDom(data[i].title, data[i].content, noteContainer);
  }
}

function main() {
  var noteData = [
      {title: 'Note 1', content: 'Content of Note 1'},
      {title: 'Note 2', content: 'Content of Note 2'}];
  var noteListElement = document.getElementById('notes');
  makeNotes(noteData, noteListElement);
}

main();

Puoi passare questo programma al servizio Closure Compiler in modo più pratico come file che con una grande stringa. Per elaborare un file con il servizio, procedi nel seguente modo:

1. Salva il file JavaScript in un file.
2. Rendi il file accessibile sul Web (ad esempio caricandolo sul tuo server web).
3. Effettua una richiesta POST al servizio Closure Compiler come dimostrato nella comunicazione con l'API, ma per il parametro js_code sostituisci un parametro code_url. Il valore di code_url deve essere l'URL del file JavaScript creato nel passaggio 1.

Ad esempio, puoi trovare il codice JavaScript per questo esempio nel file tutorial2.js. Per elaborare questo file con l'API del servizio Closure Compiler, modifica il programma Python da Comunicazione con l'API per utilizzare code_url, in questo modo:

#!/usr/bin/python2.4

import httplib, urllib, sys

# Define the parameters for the POST request and encode them in
# a URL-safe format.

params = urllib.urlencode([
    ('code_url', sys.argv[1]), # <--- This parameter has a new name!
    ('compilation_level', 'WHITESPACE_ONLY'),
    ('output_format', 'text'),
    ('output_info', 'compiled_code'),
  ])

# Always use the following value for the Content-type header.
headers = { "Content-type": "application/x-www-form-urlencoded" }
conn = httplib.HTTPSConnection('closure-compiler.appspot.com')
conn.request('POST', '/compile', params, headers)
response = conn.getresponse()
data = response.read()
print data
conn.close()

Nota: per riprodurre questo esempio, gli utenti Windows potrebbero dover installare Python. Per istruzioni sull'installazione e l'utilizzo di Python in Windows, consulta le Domande frequenti su Python per Windows.

Invia il codice al servizio Closure Compiler con questo comando:

$ python compile.py https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js

Il servizio Closure Compiler recupera il file da https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js e restituisce JavaScript compresso nella risposta.

Per compilare più file di output in un unico file di output, includi più parametri code_url, come in questo esempio:

params = urllib.urlencode([
    # Multiple code_url parameters:
    ('code_url', 'http://yourserver.com/yourJsPart1.js'),
    ('code_url', 'http://yourserver.com/yourJsPart2.js'),
    ('compilation_level', 'WHITESPACE_ONLY'),
    ('output_format', 'text'),
    ('output_info', 'compiled_code'),
  ])

Migliorare la compressione

Negli esempi sono stati utilizzati finora compilation_level di WHITESPACE_ONLY, che rimuove i commenti e lo spazio vuoto. Con il livello di compressione SIMPLE_OPTIMIZATIONS puoi aumentare la velocità di compressione. Per utilizzare la compressione SIMPLE_OPTIMIZATIONS, modifica il parametro compilation_level in SIMPLE_OPTIMIZATIONS:

params = urllib.urlencode([
    ('code_url', sys.argv[1]),
    ('compilation_level', 'SIMPLE_OPTIMIZATIONS'),  # <--- This parameter has a new value!
    ('output_format', 'text'),
    ('output_info', 'compiled_code'),
  ])

ed esegui lo script come prima:

$ python compile.py https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js

L'output dovrebbe essere simile al seguente:

var GLOBAL_document=document,$$PROP_appendChild="appendChild";function makeNoteDom(a,b,c){var d=GLOBAL_document.createElement("div");a=GLOBAL_document.createTextNode(a);d[$$PROP_appendChild](a);a=GLOBAL_document.createElement("div");b=GLOBAL_document.createTextNode(b);a[$$PROP_appendChild](b);b=GLOBAL_document.createElement("div");b[$$PROP_appendChild](d);b[$$PROP_appendChild](a);c[$$PROP_appendChild](b)}function makeNotes(a,b){for(var c=0;c<a.length;c++)makeNoteDom(a[c].title,a[c].content,b)}
function main(){var a=[{title:"Note 1",content:"Content of Note 1"},{title:"Note 2",content:"Content of Note 2"}],b=GLOBAL_document.getElementById("notes");makeNotes(a,b)}main();

Questo codice è più difficile da leggere rispetto al programma di origine, ma è più piccolo.

Quanto è più piccolo il codice?

Se modifichiamo il output_info nei parametri della richiesta da compiled_code a statistics, possiamo vedere esattamente quanto spazio abbiamo risparmiato:

Original Size: 1372
Compressed Size: 677
Compilation Time: 0

Le dimensioni del nuovo JavaScript sono inferiori alla metà di quelle dell'originale.

In che modo il servizio di chiusura delle clausole ha ridotto il programma?

In questo caso, il componente Closure Compiler raggiunge la riduzione delle dimensioni in parte rinominando le variabili locali. Ad esempio, il file originale include questa riga di codice:

var headerElement = document.createElement('div');

Closure Compiler modifica la dichiarazione in:

var d=document.createElement("div");

Il compilatore chiude il simbolo headerElement in d ovunque all'interno della funzione makeNoteDom, mantenendo quindi la funzionalità. Tuttavia, i 13 caratteri di headerElement sono stati abbreviati in un carattere in ciascuno dei tre punti in cui vengono visualizzati. per ottenere un risparmio totale di 36 caratteri.

La compilazione con SIMPLE_OPTIMIZATIONS conserva sempre la funzionalità di JavaScript sintatticamente valido, a condizione che il codice non acceda alle variabili locali utilizzando i nomi delle stringhe (con, ad esempio, le istruzioni eval()).

Passaggi successivi

Ora che hai acquisito familiarità con il SIMPLE_OPTIMIZATIONS e le funzionalità di base dell'utilizzo del servizio, il passaggio successivo consiste nel conoscere il livello di compilazione ADVANCED_OPTIMIZATIONS. Questo livello richiede alcuni passaggi aggiuntivi per garantire che il tuo codice JavaScript funzioni allo stesso modo prima e dopo la compilazione, ma lo rende ancora più piccolo. Per ulteriori informazioni su ADVANCED_OPTIMIZATIONS, consulta la pagina Compilation avanzata e dettagli esterni.