Diese Seite wurde von der Cloud Translation API übersetzt.

Dateien mit der Closure Compiler Service API komprimieren

Der Compiler-Dienst für die Schließung wurde verworfen und wird entfernt. Wir empfehlen, den Compiler stattdessen lokal auszuführen.

Übersicht

In der Kommunikation mit der API wurden die Grundlagen der Kommunikation mit dem Closure Compiler-Dienst beschrieben. Der Dienst veranschaulicht jedoch nur, dass Kommentare aus einer einzigen JavaScript-Zeile entfernt werden. In dieser Anleitung wird die Verwendung des Closure-Compiler-Dienstes in einem realistischeren Entwicklungsszenario veranschaulicht: die Verarbeitung einer ganzen JavaScript-Datei, um die Größe erheblich zu verringern.

In dieser Anleitung wird davon ausgegangen, dass Sie mit JavaScript und HTTP vertraut sind. Es wird zwar ein Python-Skript verwendet, um JavaScript an den Closure-Compiler-Dienst zu senden, aber Sie müssen Python nicht kennen, um dem Beispiel zu folgen.

Datei komprimieren
Komprimierung verbessern
1. Wie viel kleiner ist der Code?
2. Wie hat der Closure-Compiler-Dienst das Programm kleiner gemacht?
Nächste Schritte

Datei komprimieren

Im Beispiel unter Mit der API kommunizieren wurde ein JavaScript-String als Befehlszeilenparameter an unser Kompilierungsskript übergeben. Dieser Ansatz funktioniert bei einem realistischen JavaScript-Programm jedoch nicht sehr gut, da der JavaScript-String schnell unzuverlässig wird, wenn der Code länger als ein paar Zeilen ist. Bei größeren Programmen können Sie mit dem Anfrageparameter code_url den Namen der zu verarbeitenden JavaScript-Datei angeben. Sie können code_url zusätzlich zu js_code oder als Ersatz für js_code verwenden.

Betrachten Sie beispielsweise das folgende JavaScript-Programm:

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

Sie können dieses Programm bequemer als Datei an den Closure Compiler-Dienst als als einen großen String übergeben. So verarbeiten Sie eine Datei mit dem Dienst:

Speichern Sie den JavaScript-Code in einer Datei.
Die Datei im Web zugänglich machen (z. B. durch Hochladen auf den Webserver).
Senden Sie eine POST-Anfrage an den Closure Compiler-Dienst, wie unter Mit der API kommunizieren beschrieben, aber für den Parameter js_code einen code_url-Parameter. Der Wert von code_url muss die URL der in Schritt 1 erstellten JavaScript-Datei sein.

Sie finden das JavaScript für dieses Beispiel beispielsweise in der Datei tutorial2.js. Um diese Datei mit der Closure Compiler Service API zu verarbeiten, ändern Sie das Python-Programm von „Kommunizieren mit der API“ so, dass code_url verwendet wird:

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

Hinweis:Um dieses Beispiel zu reproduzieren, müssen Windows-Nutzer möglicherweise Python installieren. Eine Anleitung zur Installation und Verwendung von Python unter Windows finden Sie in den FAQ zu Python unter Windows.

Senden Sie den Code mit dem folgenden Befehl an den Closure Compiler-Dienst:

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

Der Closure Compiler-Dienst ruft die Datei aus https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js ab und gibt komprimiertes JavaScript in der Antwort zurück.

Wenn Sie mehrere Ausgabedateien zu einer einzigen Ausgabedatei kompilieren möchten, fügen Sie wie im folgenden Beispiel mehrere code_url-Parameter hinzu:

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

Komprimierung verbessern

In den Beispielen wurden bisher compilation_level von WHITESPACE_ONLY verwendet, die nur Kommentare und Leerräume entfernen. Mit der Komprimierungsstufe SIMPLE_OPTIMIZATIONS können Sie viel höhere Komprimierungsraten erzielen. Ändern Sie den Parameter compilation_level in SIMPLE_OPTIMIZATIONS, um die SIMPLE_OPTIMIZATIONS-Komprimierung zu verwenden:

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

und führen Sie das Skript wie zuvor aus:

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

Die Ausgabe sollte in etwa so aussehen:

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

Dieser Code ist schwieriger zu lesen als das Quellprogramm, er ist jedoch kleiner.

Wie viel kleiner ist der Code?

Wenn wir output_info in unseren Anfrageparametern von compiled_code in statistics ändern, sehen wir genau, wie viel Speicherplatz wir einsparen:

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

Das neue JavaScript ist weniger als halb so groß wie das Original.

Wie hat der Closure-Compiler-Dienst das Programm verkleinert?

In diesem Fall erreicht der Compiler Closure die reduzierte Größe, indem er lokale Variablen umbenennt. Die Originaldatei enthält beispielsweise diese Codezeile:

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

Closure Compiler ändert diese Anweisung in:

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

Der Closure Compiler ändert das Symbol headerElement überall in der Funktion makeNoteDom in d und behält damit die Funktionalität bei. Die 13 Zeichen von headerElement wurden jedoch an jedem der drei Stellen, an denen sie vorkommen, auf jeweils ein Zeichen gekürzt. Das spart insgesamt 36 Zeichen.

Bei der Kompilierung mit SIMPLE_OPTIMIZATIONS wird immer die Funktionalität von syntaktisch gültigem JavaScript beibehalten, sofern der Code nicht über Stringnamen auf lokale Variablen zugreift (z. B. mit eval()-Anweisungen).

Nächste Schritte

Sie kennen jetzt die SIMPLE_OPTIMIZATIONS und die grundlegenden Mechanismen zur Verwendung des Dienstes. Als Nächstes lernen Sie, wie Sie den Kompilierungsgrad ADVANCED_OPTIMIZATIONS ermitteln. Diese Stufe erfordert einige zusätzliche Schritte, damit JavaScript vor und nach der Kompilierung auf dieselbe Weise funktioniert, der JavaScript-Code aber noch kleiner wird. Weitere Informationen zu ADVANCED_OPTIMIZATIONS finden Sie unter Erweiterte Kompilierung und externe Verbindungen.