Эта страница переведена с помощью Cloud Translation API.

Сжатие файлов с помощью Closure Compiler Service API

Служба компилятора закрытия устарела и будет удалена. Вместо этого рассмотрите возможность локального запуска компилятора.

Обзор

Общение с API описывает основы взаимодействия со службой Closure Compiler, но иллюстрирует только использование службы для удаления комментариев из одной строки JavaScript. В этом руководстве показано, как использовать службу Closure Compiler в более реалистичном сценарии разработки: обработка всего файла JavaScript для достижения значительного уменьшения размера.

В этом руководстве предполагается, что у вас есть базовые знания JavaScript и HTTP. Хотя он использует скрипт Python для отправки JavaScript в службу Closure Compiler, вам не нужно знать Python, чтобы следовать этому примеру.

Сжатие файла
Улучшение сжатия
1. Насколько меньше код?
2. Как сервис Closure Compiler сделал программу меньше?
Следующие шаги

Сжатие файла

В примере из раздела «Общение с API » строка JavaScript передается в качестве параметра командной строки нашему сценарию компиляции. Однако этот подход не очень хорошо работает для программы JavaScript реалистичного размера, потому что строка JavaScript быстро становится громоздкой, когда код длиннее нескольких строк. Для больших программ вы можете использовать параметр запроса code_url , чтобы указать имя обрабатываемого файла JavaScript. Вы можете использовать code_url в дополнение к js_code или вместо js_code .

Например, рассмотрим следующую программу 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();

Вы можете передать эту программу службе Closure Compiler более удобно в виде файла, чем в виде одной большой строки. Выполните следующие действия, чтобы обработать файл с помощью службы:

Сохраните JavaScript в файле.
Сделайте файл доступным в Интернете (например, загрузив его на свой веб-сервер).
Отправьте запрос POST службе Closure Compiler, как показано в разделе Взаимодействие с API , но вместо параметра js_code замените параметр code_url . Значение code_url должно быть URL-адресом файла JavaScript, созданного на шаге 1.

Например, вы можете найти JavaScript для этого примера в файле tutorial2.js . Чтобы обработать этот файл с помощью API службы Closure Compiler, измените программу python с Общение с API на использование code_url , например:

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

Примечание. Чтобы воспроизвести этот пример, пользователям Windows может потребоваться установить Python. Инструкции по установке и использованию Python в Windows см. в FAQ по Python для Windows.

Отправьте код службе Closure Compiler с помощью следующей команды:

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

Служба Closure Compiler извлекает файл с https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js и возвращает сжатый код JavaScript в ответе.

Чтобы скомпилировать несколько выходных файлов в один выходной файл, включите несколько параметров code_url , как в этом примере:

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

Улучшение сжатия

До сих пор в примерах использовался уровень compilation_level WHITESPACE_ONLY , который просто удаляет комментарии и пробелы. С уровнем сжатия SIMPLE_OPTIMIZATIONS вы можете достичь гораздо более высокой степени сжатия. Чтобы использовать сжатие SIMPLE_OPTIMIZATIONS , измените параметрcompile_level SIMPLE_OPTIMIZATIONS compilation_level

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

и запустите скрипт, как и раньше:

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

Вывод должен выглядеть так:

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

Этот код труднее читать, чем исходную программу, но он меньше.

Насколько меньше код?

Если мы изменим output_info в параметрах нашего запроса с compiled_code на statistics , мы сможем точно увидеть, сколько места мы сэкономили:

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

Новый JavaScript в два раза меньше оригинала.

Как сервис Closure Compiler сделал программу меньше?

В этом случае Closure Compiler частично добивается уменьшения размера за счет переименования локальных переменных. Например, исходный файл включает в себя эту строку кода:

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

Компилятор закрытия изменяет это выражение на:

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

Компилятор Closure изменяет headerElement символа на d везде внутри функции makeNoteDom и, таким образом, сохраняет функциональность. Но 13 символов headerElement были сокращены до одного символа в каждом из трех мест, где они появляются. Это дает общую экономию 36 символов.

Компиляция с SIMPLE_OPTIMIZATIONS всегда сохраняет функциональность синтаксически допустимого JavaScript, при условии, что код не обращается к локальным переменным с помощью строковых имен (например, с операторами eval() ).

Следующие шаги

Теперь, когда вы знакомы с SIMPLE_OPTIMIZATIONS и основными механизмами использования службы, следующим шагом будет изучение уровня компиляции ADVANCED_OPTIMIZATIONS . Этот уровень требует некоторых дополнительных шагов, чтобы убедиться, что ваш JavaScript работает одинаково до и после компиляции, но это делает JavaScript еще меньше. См. Advanced Compilation and Externs , чтобы узнать о ADVANCED_OPTIMIZATIONS .