Compresser des fichiers avec l'API Closure Compiler Service

Le service de compilation de fermeture est obsolète et sera supprimé. Envisagez plutôt d'exécuter le compilateur en local.

Présentation

La présentation de la communication avec l'API a décrit les principes de base de la communication avec le service Compiler Closure, mais elle n'a illustré que l'utilisation de ce service pour supprimer les commentaires d'une seule ligne JavaScript. Ce tutoriel explique comment utiliser le service Compiler Closure dans un scénario de développement plus réaliste: le traitement d'un fichier JavaScript complet pour réduire considérablement la taille.

Dans ce tutoriel, nous partons du principe que vous maîtrisez les bases de JavaScript et de HTTP. Bien qu'elle utilise un script Python pour envoyer du code JavaScript au service Closure Compiler, vous n'avez pas besoin de connaître Python pour suivre cet exemple.

  1. Compresser un fichier
  2. Améliorer la compression
    1. Quelle est la proportion du code ?
    2. Comment le service Compiler Compiler a-t-il réduit le programme ?
  3. Étapes suivantes

Compresser un fichier

L'exemple présenté sur la page Communiquer avec l'API a transmis une chaîne JavaScript en tant que paramètre de ligne de commande à notre script de compilation. Toutefois, cette approche ne fonctionnera pas très bien pour un programme JavaScript de taille réaliste, car la chaîne JavaScript devient rapidement problématique lorsque le code comporte plus de quelques lignes. Pour les programmes plus importants, vous pouvez utiliser le paramètre de requête code_url pour spécifier le nom d'un fichier JavaScript à traiter. Vous pouvez utiliser code_url en plus de js_code ou remplacer js_code.

Prenons l'exemple du programme JavaScript suivant: 

/**
 * 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();

Vous pouvez transmettre ce programme au service Closure Compiler plus facilement en tant que fichier plutôt qu'en tant que chaîne de grande taille. Pour traiter un fichier avec le service, procédez comme suit:

  1. Enregistrez le code JavaScript dans un fichier.
  2. Rendez le fichier accessible sur le Web (en l'important sur votre serveur Web, par exemple).
  3. Envoyez une requête POST au service Closure Compiler comme indiqué dans la section Communiquer avec l'API, mais remplacez le paramètre js_code par un paramètre code_url. La valeur de code_url doit être l'URL du fichier JavaScript créé à l'étape 1.

Le code JavaScript de cet exemple se trouve dans le fichier tutorial2.js. Pour traiter ce fichier avec l'API du service Compiler Closure, remplacez le programme Python "Communication avec l'API" pour utiliser code_url, comme suit:

#!/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()

Remarque : Pour reproduire cet exemple, les utilisateurs Windows devront peut-être installer Python. Pour obtenir des instructions sur l'installation et l'utilisation de Python sous Windows, reportez-vous aux questions fréquentes sur Python pour Windows.

Envoyez le code au service Closure Compiler à l'aide de la commande suivante:

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

Le service Compiler Closure récupère le fichier à partir de https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js et renvoie un fichier JavaScript compressé dans la réponse.

Pour compiler plusieurs fichiers de sortie en un seul, incluez plusieurs paramètres code_url, comme dans cet exemple: 

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'),
  ])

Améliorer la compression

Jusqu'à présent, les exemples ont utilisé un compilation_level de WHITESPACE_ONLY, qui ne fait que supprimer les commentaires et les espaces. Avec le niveau de compression SIMPLE_OPTIMIZATIONS, vous pouvez atteindre des taux de compression beaucoup plus élevés. Pour utiliser la compression SIMPLE_OPTIMIZATIONS, définissez le paramètre compilation_level sur 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'),
  ])

et exécutez le script comme précédemment: 

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

Le résultat doit se présenter comme suit : 

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();

Ce code est plus difficile à lire que le programme source, mais il est plus petit.

Le code est-il beaucoup plus petit ?

Si nous remplaçons output_info dans nos paramètres de requête de compiled_code à statistics, nous pouvons voir exactement combien d'espace nous avons économisés: 

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

La taille du nouveau code JavaScript est inférieure à la moitié de celle du code d'origine.

En quoi le service de cloisonnement a-t-il réduit le programme ?

Dans ce cas, Closure Compiler réduit en partie la taille en renommant les variables locales. Par exemple, le fichier d'origine contient la ligne de code suivante: 

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

Closure Compiler modifie cette instruction en: 

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

Closure Compiler remplace le symbole headerElement par d dans la fonction makeNoteDom, ce qui préserve les fonctionnalités. Toutefois, les 13 caractères de headerElement ont été abrégés en un caractère dans chacun des trois endroits où ils apparaissent. Vous économisez ainsi 36 caractères au total.

La compilation avec SIMPLE_OPTIMIZATIONS préserve toujours la fonctionnalité d'un code JavaScript valide d'un point de vue syntaxique, à condition que le code n'accède pas aux variables locales à l'aide de noms de chaîne (par exemple, avec des instructions eval()).

Étapes suivantes

Maintenant que vous connaissez SIMPLE_OPTIMIZATIONS et les mécanismes de base de l'utilisation du service, l'étape suivante consiste à découvrir le niveau de compilation ADVANCED_OPTIMIZATIONS. Ce niveau nécessite des étapes supplémentaires pour s'assurer que votre code JavaScript fonctionne de la même manière avant et après la compilation, mais le rend encore plus petit. Pour en savoir plus sur ADVANCED_OPTIMIZATIONS, consultez la section Compilation avancée et évaluation externe.