Bu sayfa, Cloud Translation API ile çevrilmiştir.

Closure Compiler Service API ile Dosyaları Sıkıştırma

Kapatma derleyici hizmeti kullanımdan kaldırılmıştır ve kaldırılacaktır. Bunun yerine derleyiciyi yerel olarak çalıştırmayı düşünebilirsiniz.

Genel bakış

API ile iletişim kurma, Closure Compiler hizmetiyle iletişim kurmanın temellerini açıklar ancak hizmeti yalnızca tek bir JavaScript satırındaki yorumları ayırmak için nasıl kullandığını gösterir. Bu eğitim, daha gerçekçi bir geliştirme senaryosunda Kapatma Derleyici Hizmeti'nin nasıl kullanılacağını gösterir: önemli bir boyut azaltma sağlamak için bir JavaScript dosyasının tamamı işlenir.

Bu eğitimde, JavaScript ve HTTP hakkında temel bilgiye sahip olduğunuz varsayılır. JavaScript komut dosyasını Closure Compiler hizmetine göndermek için Python komut dosyasını kullanır ancak örneği takip etmek için Python'u bilmeniz gerekmez.

Dosya Sıkıştırma
Sıkıştırmayı İyileştirme
1. Kod Ne Kadar Düşük?
2. Kapatma İşlemi Derleyici Hizmeti Programı Nasıl Kısalttı?
Sonraki Adımlar

Dosya Sıkıştırma

API ile iletişim kurma Örneği, derleme komut dosyamıza komut satırı parametresi olarak bir JavaScript dizesi iletti. Ancak bu yaklaşım, gerçek boyutlu bir JavaScript programında çok iyi çalışmayacaktır. Bunun nedeni, kod birkaç satırdan uzun olduğunda JavaScript dizesinin hızlı bir şekilde kararsız hale gelmesidir. Daha büyük programlarda, işlenecek JavaScript dosyasının adını belirtmek için code_url request parametresini kullanabilirsiniz. js_code öğesine ek olarak veya js_code için bir değiştirme olarak code_url kullanabilirsiniz.

Örneğin, aşağıdaki JavaScript programını ele alalım:

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

Bu programı, büyük bir dize yerine dosya olarak daha rahat bir şekilde Closure Compiler hizmetine aktarabilirsiniz. Hizmetle bir dosyayı işlemek için şu adımları uygulayın:

JavaScript'i bir dosyaya kaydedin.
Dosyayı web'de erişilebilir hale getirin (örneğin, web sunucunuza yükleyerek).
API ile iletişim kurma bölümünde gösterildiği gibi Kapatma Derleyici hizmetine POST isteği gönderin ancak js_code parametresi için code_url parametresi kullanın. code_url değeri, 1. adımda oluşturulan JavaScript dosyasının URL'si olmalıdır.

Örneğin, bu örnekteki JavaScript kodunu tutorial2.js dosyasında bulabilirsiniz. Bu dosyayı Closure Compiler service API ile işlemek için API'yle iletişimdeki Python programını code_url kullanacak şekilde değiştirin:

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

Not: Bu örneği tekrar oluşturmak için Windows kullanıcılarının Python'u yüklemesi gerekebilir. Windows'da Python yükleme ve kullanma talimatları için Python Windows SSS sayfasına bakın.

Kodu aşağıdaki komutla Closure Compiler hizmetine gönderin:

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

Closure Compiler hizmeti, dosyayı https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js öğesinden alır ve yanıt olarak sıkıştırılmış JavaScript'i döndürür.

Birden çok çıkış dosyasını tek bir çıkış dosyasında derlemek için birden fazla code_url parametresi ekleyin (bu örnekte olduğu gibi):

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

Sıkıştırmayı İyileştirme

Şu ana kadar verilen örneklerde yalnızca yorumlardan ve boşluktan çıkarılan compilation_level WHITESPACE_ONLY kullanılıyor. SIMPLE_OPTIMIZATIONS sıkıştırma düzeyiyle çok daha yüksek sıkıştırma oranları elde edebilirsiniz. SIMPLE_OPTIMIZATIONS sıkıştırmasını kullanmak için compilation_level parametresini SIMPLE_OPTIMIZATIONS olarak değiştirin:

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

komut dosyasını önceki gibi çalıştırın:

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

Çıkış şu şekilde görünmelidir:

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

Bu kodu okumak kaynak programdan daha zor olsa da daha küçüktür.

Kurallar Ne Kadar Düşük?

İstek parametrelerimizdeki compiled_code olan output_info değerini statistics olarak değiştirirsek, tam olarak ne kadar alandan tasarruf ettiğimizi görebiliriz:

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

Yeni JavaScript, orijinalin yarısından daha azdır.

Kapatma Derleyici Hizmeti Programı Programı Nasıl Küçülttü?

Bu durumda, Closure Compiler, yerel değişkenleri yeniden adlandırarak boyuttaki düşüşü elde eder. Örneğin, orijinal dosya şu kod satırını içerir:

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

Kapatma Derleyici bu ifadeyi şu şekilde değiştirir:

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

Kapatma Derleyici (headerElement) simgesini makeNoteDom işlevinin her yerinde d olarak değiştirir ve böylece işlevi korur. Ancak headerElement karakterlerinin 13 karakteri, göründükleri üç yerin her birinde birer karakter olacak şekilde kısaltıldı. Bu sayede toplamda 36 karakter tasarruf etmiş olursunuz.

Kodun dize adlarını (örneğin, eval() ifadeleri) kullanarak yerel değişkenlere erişememesi durumunda SIMPLE_OPTIMIZATIONS ile derleme, söz dizimsel olarak geçerli JavaScript'in işlevlerini her zaman korur.

Sonraki Adımlar

SIMPLE_OPTIMIZATIONS ve hizmeti kullanmaya ilişkin temel mekanizmalara aşina olduğunuza göre bir sonraki adımda ADVANCED_OPTIMIZATIONS derleme düzeyi hakkında bilgi edinebilirsiniz. Bu düzey, JavaScript'inizin derlemeden önce ve sonra aynı şekilde çalışmasını sağlamak için ekstra adımlar gerektirir ancak JavaScript'i daha da küçük hale getirir. ADVANCED_OPTIMIZATIONS hakkında bilgi edinmek için Gelişmiş Derleme ve Harici Bölgeler bölümüne bakın.