การบีบอัดไฟล์ด้วย Closure Compiler Service API

ภาพรวม

การสื่อสารกับ API อธิบายข้อมูลพื้นฐานเกี่ยวกับวิธีสื่อสารกับบริการ Closure Compiler แต่แสดงภาพโดยใช้บริการเท่านั้นเพื่อตัดความคิดเห็นจาก JavaScript บรรทัดเดียว บทแนะนํานี้จะแสดงวิธีใช้บริการ Closure Compiler ในสถานการณ์การพัฒนาที่สมจริงมากขึ้น ซึ่งก็คือการประมวลผลไฟล์ JavaScript ทั้งไฟล์เพื่อลดขนาดลงอย่างมาก

บทแนะนํานี้จะถือว่าคุณมีความคุ้นเคยกับ JavaScript และ HTTP ในระดับพื้นฐาน แม้ว่าจะใช้สคริปต์ Python เพื่อส่ง JavaScript ไปยังบริการ Closure Compiler คุณไม่จําเป็นต้องรู้จัก Python ทําตามตัวอย่าง

1. การบีบอัดไฟล์
2. การปรับปรุงการบีบอัด
   1. รหัสมีขนาดเล็กลงเพียงใด
   2. บริการคอมไพล์แบบปิดช่วยให้โปรแกรมมีขนาดเล็กลงได้อย่างไร
3. ขั้นตอนถัดไป

การบีบอัดไฟล์

ตัวอย่างในการสื่อสารกับ API ส่งสตริง JavaScript เป็นพารามิเตอร์บรรทัดคําสั่งไปยังสคริปต์การรวบรวม อย่างไรก็ตาม วิธีนี้อาจทํางานได้ไม่ดีสําหรับโปรแกรม JavaScript ที่มีขนาดสมจริง แต่เนื่องจากสตริง JavaScript เริ่มใช้งานไม่ได้อย่างรวดเร็วเมื่อโค้ดยาวเกิน 2-3 บรรทัด สําหรับโปรแกรมขนาดใหญ่ คุณสามารถใช้พารามิเตอร์คําขอ 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 ได้อย่างสะดวกสบายเป็นไฟล์มากกว่าสตริงเดียว ทําตามขั้นตอนต่อไปนี้เพื่อประมวลผลไฟล์กับบริการ

1. บันทึก JavaScript ในไฟล์
2. ทําให้เข้าถึงไฟล์บนเว็บได้ (เช่น อัปโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณ)
3. ส่งคําขอ POST ไปยังบริการ Closure Compiler ดังที่แสดงในส่วนการสื่อสารกับ API แต่สําหรับพารามิเตอร์ js_code จะแทนที่พารามิเตอร์ code_url ค่าของ code_url ต้องเป็น URL ของไฟล์ JavaScript ที่สร้างในขั้นตอนที่ 1

เช่น คุณจะค้นหา JavaScript สําหรับตัวอย่างนี้ได้ในไฟล์ tutorial2.js หากต้องการประมวลผลไฟล์นี้ด้วย Closure Compiler Service API ให้เปลี่ยนโปรแกรม Python จาก Communication with 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 สําหรับวิธีการติดตั้งและใช้ Python ใต้ Windows

ส่งรหัสไปยังบริการคอมไพเลอร์ Closure ด้วยคําสั่งต่อไปนี้

$ 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 ให้เปลี่ยนพารามิเตอร์ compilation_level เป็น 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'),
  ])

และเรียกใช้สคริปต์ตามปกติ

$ 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 ลดขนาดลงได้บางส่วนโดยการเปลี่ยนชื่อตัวแปรในเครื่อง เช่น ไฟล์ต้นฉบับ มีโค้ดบรรทัดนี้รวมอยู่ด้วย

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

คอมไพเลอร์ Closure เปลี่ยนข้อความนี้เป็น:

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

คอมไพเลอร์ Closure จะเปลี่ยนสัญลักษณ์ headerElement เป็น d ทุกตําแหน่งภายในฟังก์ชัน makeNoteDom และเพื่อรักษาฟังก์ชันการทํางานไว้ แต่อักขระ 13 ตัวของ headerElement ได้ถูกตัดให้สั้นลงเหลือเพียง 1 อักขระจากทั้งหมด 3 ตําแหน่งที่ปรากฏ โดยใช้อักขระทั้งหมด 36 ตัว

การคอมไพล์ด้วย SIMPLE_OPTIMIZATIONS จะใช้ฟังก์ชันของ JavaScript ที่ถูกต้องตามไวยากรณ์เสมอ โดยที่โค้ดจะไม่เข้าถึงตัวแปรในเครื่องที่ใช้ชื่อสตริง (เช่น eval() คําสั่ง)

ขั้นตอนถัดไป

ตอนนี้คุณคุ้นเคยกับ SIMPLE_OPTIMIZATIONS และ กลไกพื้นฐานในการใช้บริการแล้ว ขั้นตอนถัดไปคือการเรียนรู้เกี่ยวกับระดับการรวบรวม ADVANCED_OPTIMIZATIONS ระดับนี้ต้องใช้ขั้นตอนเพิ่มเติมเพื่อให้แน่ใจว่า JavaScript ทํางานในลักษณะเดียวกันก่อนและหลังการรวบรวม แต่จะทําให้ JavaScript มีขนาดเล็กลง โปรดดูการรวบรวมขั้นสูงและภายนอกเพื่อดูข้อมูลเกี่ยวกับ ADVANCED_OPTIMIZATIONS