Mengompresi File dengan Closure Compiler Service API

Layanan compiler Closure tidak digunakan lagi, dan akan dihapus. Sebaiknya jalankan compiler secara lokal.

Ringkasan

Berkomunikasi dengan API menjelaskan dasar-dasar cara berkomunikasi dengan layanan Compiler Closure, tetapi hanya diilustrasikan menggunakan layanan untuk menghapus komentar dari satu baris JavaScript. Tutorial ini mengilustrasikan cara menggunakan layanan Closure Compiler dalam skenario pengembangan yang lebih realistis: memproses seluruh file JavaScript untuk mencapai pengurangan ukuran yang signifikan.

Tutorial ini mengasumsikan bahwa Anda telah memiliki pengetahuan dasar tentang JavaScript dan HTTP. Meskipun skrip ini menggunakan skrip Python untuk mengirimkan JavaScript ke layanan Closure Compiler, Anda tidak perlu mengetahui Python untuk mengikuti contoh.

  1. Kompresi File
  2. Meningkatkan Kompresi
    1. Seberapa Kecil Kodenya?
    2. Bagaimana Layanan Closure Compiler Membuat Program Lebih Kecil?
  3. Langkah Berikutnya

Mengompresi File

Contoh di bagian Berkomunikasi dengan API meneruskan string JavaScript sebagai parameter command line ke skrip kompilasi. Namun, pendekatan ini tidak akan berfungsi dengan baik untuk program JavaScript berukuran realistis, karena string JavaScript dengan cepat menjadi berat saat kode lebih panjang dari beberapa baris. Untuk program yang lebih besar, Anda dapat menggunakan parameter permintaan code_url untuk menentukan nama file JavaScript yang akan diproses. Anda dapat menggunakan code_url selain js_code, atau sebagai pengganti js_code.

Misalnya, pertimbangkan program JavaScript berikut: 

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

Anda dapat meneruskan program ini ke layanan Closure Compiler dengan lebih mudah sebagai file daripada sebagai satu string besar. Ikuti langkah-langkah berikut untuk memproses file dengan layanan:

  1. Menyimpan JavaScript dalam file.
  2. Membuat file dapat diakses di web (misalnya, dengan menguploadnya ke server web Anda).
  3. Buat permintaan POST ke layanan Closure Compiler seperti yang ditunjukkan dalam Berkomunikasi dengan API, tetapi untuk parameter js_code menggantikan parameter code_url. Nilai code_url harus berupa URL file JavaScript yang dibuat di Langkah 1.

Misalnya, Anda dapat menemukan JavaScript untuk contoh ini di file tutorial2.js. Untuk memproses file ini dengan Closure Compiler service API, ubah program python dari Berkomunikasi dengan API untuk menggunakan code_url, seperti berikut:

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

Catatan: Untuk mereproduksi contoh ini, pengguna Windows mungkin perlu menginstal Python. Lihat FAQ Python Windows untuk mendapatkan petunjuk tentang cara menginstal dan menggunakan Python di bawah Windows.

Kirim kode ke layanan Closure Compiler dengan perintah berikut:

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

Layanan Closure Compiler mengambil file dari https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js dan menampilkan JavaScript terkompresi dalam respons.

Untuk mengompilasi beberapa file output sekaligus menjadi satu file output, sertakan beberapa parameter code_url, seperti dalam contoh ini: 

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

Meningkatkan Kompresi

Contoh sejauh ini telah menggunakan compilation_level dari WHITESPACE_ONLY, yang hanya menghapus komentar dan mengosongkan ruang kosong. Dengan level kompresi SIMPLE_OPTIMIZATIONS, Anda dapat mencapai tingkat kompresi yang jauh lebih tinggi. Untuk menggunakan kompresi SIMPLE_OPTIMIZATIONS, ubah parameter compilation_level menjadi 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'),
  ])

dan jalankan skrip seperti sebelumnya: 

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

Output akan terlihat seperti ini: 

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

Kode ini lebih sulit dibaca daripada program sumber, tetapi lebih kecil.

Seberapa Kecil Kodenya?

Jika output_info dalam parameter permintaan diubah dari compiled_code menjadi statistics, kita dapat melihat dengan tepat jumlah ruang yang dihemat: 

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

JavaScript baru kurang dari setengah ukuran aslinya.

Bagaimana Layanan Closure Compiler Membuat Program Lebih Kecil?

Dalam hal ini, Closure Compiler mencapai pengurangan ukuran sebagian dengan mengganti nama variabel lokal. Misalnya, file asli menyertakan baris kode ini: 

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

Closure Compiler mengubah pernyataan ini menjadi: 

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

Closure Compiler mengubah simbol headerElement menjadi d di mana saja dalam fungsi makeNoteDom, sehingga mempertahankan fungsi. Namun, 13 karakter headerElement telah dipersingkat menjadi satu karakter di masing-masing dari tiga tempat tempat karakter tersebut muncul. Dengan begitu, total penghematan 36 karakter.

Kompilasi dengan SIMPLE_OPTIMIZATIONS selalu mempertahankan fungsi JavaScript yang valid secara sintaksis, asalkan kode tersebut tidak mengakses variabel lokal menggunakan nama string (misalnya, pernyataan eval()).

Langkah Berikutnya

Setelah Anda memahami SIMPLE_OPTIMIZATIONS dan mekanisme dasar penggunaan layanan, langkah berikutnya adalah mempelajari tingkat kompilasi ADVANCED_OPTIMIZATIONS. Tingkat ini memerlukan beberapa langkah tambahan untuk memastikan bahwa JavaScript Anda berfungsi dengan cara yang sama sebelum dan setelah kompilasi, tetapi hal ini membuat JavaScript lebih kecil lagi. Lihat Kompilasi Lanjutan dan Eksternal untuk mempelajari ADVANCED_OPTIMIZATIONS.