Esta página foi traduzida pela API Cloud Translation.

Como compactar arquivos com a API Frontend Compiler Service

O serviço do compilador de interdição foi descontinuado e será removido. Considere executar o compilador localmente.

Visão geral

O artigo Como se comunicar com a API descreveu os conceitos básicos sobre como se comunicar com o serviço de fechamento do compilador, mas ele apenas ilustra o uso do serviço para remover comentários de uma única linha de JavaScript. Este tutorial ilustra como usar o serviço Frontend Compiler em um cenário de desenvolvimento mais realista: processar um arquivo JavaScript inteiro para reduzir significativamente o tamanho.

Para seguir este tutorial, é necessário ter familiaridade básica com JavaScript e HTTP. Embora ele use um script Python para enviar JavaScript ao serviço de fechamento do compilador, você não precisa saber Python para seguir o exemplo.

Compactar um arquivo
Como melhorar a compactação
1. O código é menor?
2. Como o Serviço de fechamento de fechamento reduziu o programa?
Próximas etapas

Compactar um arquivo

O exemplo em Comunicação com a API transmitiu uma string JavaScript como um parâmetro de linha de comando para nosso script de compilação. No entanto, essa abordagem não funcionará muito bem para um programa em JavaScript de tamanho realista, porque a string JavaScript rapidamente se torna inviável quando o código é maior do que algumas linhas. Em programas maiores, use o parâmetro de solicitação code_url para especificar o nome de um arquivo JavaScript a ser processado. É possível usar code_url além de js_code ou como uma substituição de js_code.

Por exemplo, considere o seguinte programa 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();

Você pode transmitir esse programa para o serviço de fechamento do compilador mais convenientemente como um arquivo do que como uma grande string. Siga estas etapas para processar um arquivo com o serviço:

Salve o JavaScript em um arquivo.
Torne o arquivo acessível na Web fazendo upload dele para seu servidor da Web, por exemplo.
Faça uma solicitação POST para o serviço Compile Compiler, conforme demonstrado em Comunicação com a API, mas para o parâmetro js_code substitua um parâmetro code_url. O valor de code_url precisa ser o URL do arquivo JavaScript criado na etapa 1.

Por exemplo, você pode encontrar o JavaScript desse exemplo no arquivo tutorial2.js. Para processar esse arquivo com a API de serviço do Frontend Compiler, altere o programa Python em Comunicação com a API para usar code_url, desta maneira:

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

Observação: para reproduzir este exemplo, os usuários do Windows podem precisar instalar o Python. Consulte as Perguntas frequentes sobre o Python para Windows para ver instruções sobre como instalar e usar o Python no Windows.

Envie o código para o serviço Compile Compiler com o seguinte comando:

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

O serviço Compile Compiler recupera o arquivo de https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js e retorna JavaScript compactado na resposta.

Para compilar vários arquivos de saída juntos em um arquivo de saída, inclua vários parâmetros code_url, como neste exemplo:

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

Como melhorar a compactação

Até o momento, os exemplos usaram um compilation_level de WHITESPACE_ONLY, que apenas remove comentários e espaço em branco. Com o nível de compactação SIMPLE_OPTIMIZATIONS, é possível alcançar taxas de compactação muito mais altas. Para usar a compactação SIMPLE_OPTIMIZATIONS, altere o parâmetro compilation_level para 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'),
  ])

e execute o script como antes:

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

O resultado será semelhante a este:

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

Esse código é mais difícil de ler do que o programa de origem, mas é menor.

O código é menor?

Se mudarmos o output_info nos parâmetros de solicitação de compiled_code para statistics, poderemos ver quanto espaço economizado:

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

O novo JavaScript tem menos da metade do tamanho do original.

Como o serviço de interdição de compilação tornou o programa menor?

Nesse caso, o Compiler Compiler consegue reduzir o tamanho em parte renomeando variáveis locais. Por exemplo, o arquivo original inclui esta linha de código:

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

O Closed Compiler muda essa instrução para:

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

O Compile Compiler muda o símbolo headerElement para d em qualquer lugar na função makeNoteDom e, assim, preserva a funcionalidade. No entanto, os 13 caracteres de headerElement foram encurtados para um caractere em cada um dos três lugares em que aparecem. Isso resulta em uma economia total de 36 caracteres.

A compilação com SIMPLE_OPTIMIZATIONS sempre preserva a funcionalidade do JavaScript com sintaxe válida, desde que o código não acesse variáveis locais usando nomes de strings (com instruções eval(), por exemplo).

Próximas etapas

Agora que você já conhece o SIMPLE_OPTIMIZATIONS e a mecânica básica do uso do serviço, a próxima etapa é aprender sobre o nível de compilação de ADVANCED_OPTIMIZATIONS. Esse nível exige algumas etapas extras para garantir que o JavaScript funcione da mesma forma antes e depois da compilação, mas deixa o JavaScript ainda menor. Consulte Compilação avançada e funções externas para saber mais sobre ADVANCED_OPTIMIZATIONS.