فشرده سازی فایل ها با Closure Compiler Service API

سرویس کامپایلر بستن منسوخ شده است و حذف خواهد شد. لطفاً به جای آن کامپایلر را به صورت محلی اجرا کنید.

بررسی اجمالی

در برقراری ارتباط با API ، اصول نحوه برقراری ارتباط با سرویس Closure Compiler توضیح داده شد، اما تنها استفاده از این سرویس برای حذف نظرات از یک خط جاوا اسکریپت را نشان داد. این آموزش نحوه استفاده از سرویس Closure Compiler را در یک سناریوی توسعه واقعی تر نشان می دهد: پردازش کل فایل جاوا اسکریپت برای دستیابی به کاهش قابل توجه اندازه.

این آموزش فرض می کند که شما با جاوا اسکریپت و HTTP آشنایی اولیه دارید. در حالی که از یک اسکریپت پایتون برای ارسال جاوا اسکریپت به سرویس Closure Compiler استفاده می کند، برای پیروی از این مثال نیازی به دانستن پایتون ندارید.

1. فشرده سازی یک فایل
2. بهبود فشرده سازی
   1. کد چقدر کوچکتر است؟
   2. چگونه سرویس کامپایلر بسته شدن برنامه را کوچکتر کرد؟
3. مراحل بعدی

فشرده سازی یک فایل

مثال در ارتباط با API یک رشته جاوا اسکریپت را به عنوان پارامتر خط فرمان به اسکریپت کامپایل ما ارسال کرد. با این حال، این رویکرد برای یک برنامه جاوا اسکریپت با اندازه واقعی خیلی خوب کار نخواهد کرد، زیرا رشته جاوا اسکریپت زمانی که کد طولانی‌تر از چند خط باشد، به سرعت ناکارآمد می‌شود. برای برنامه های بزرگتر می توانید از پارامتر درخواست code_url برای تعیین نام فایل جاوا اسکریپت برای پردازش استفاده کنید. می توانید از code_url علاوه بر js_code یا به عنوان جایگزینی برای js_code استفاده کنید.

به عنوان مثال، برنامه جاوا اسکریپت زیر را در نظر بگیرید:

/**
 * 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. جاوا اسکریپت را در یک فایل ذخیره کنید.
2. فایل را در وب در دسترس قرار دهید (مثلاً با آپلود آن در وب سرور خود).
3. همانطور که در ارتباط با API نشان داده شده است، یک درخواست POST به سرویس Closure Compiler ارسال کنید، اما برای پارامتر js_code یک پارامتر code_url را جایگزین کنید. مقدار code_url باید URL فایل جاوا اسکریپت ایجاد شده در مرحله 1 باشد.

به عنوان مثال، می توانید جاوا اسکریپت این مثال را در فایل tutorial2.js پیدا کنید. برای پردازش این فایل با Closure Compiler Service API، برنامه پایتون را از Communicating with the 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()

توجه: برای بازتولید این مثال، کاربران ویندوز ممکن است نیاز به نصب پایتون داشته باشند. برای دستورالعمل‌های نصب و استفاده از پایتون در ویندوز، پرسش‌های متداول پایتون ویندوز را ببینید.

کد را با دستور زیر به سرویس 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 بازیابی می کند و جاوا اسکریپت فشرده را در پاسخ برمی گرداند.

برای کامپایل چندین فایل خروجی با هم در یک فایل خروجی، مانند این مثال، چندین پارامتر 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

اندازه جاوا اسکریپت جدید کمتر از نصف اندازه اصلی است.

چگونه سرویس کامپایلر بسته شدن برنامه را کوچکتر کرد؟

در این مورد، کامپایلر Closure تا حدی با تغییر نام متغیرهای محلی، به کاهش اندازه دست می یابد. به عنوان مثال، فایل اصلی شامل این خط کد است:

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

Closure Compiler این عبارت را به:

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

کامپایلر Closure نماد headerElement را در همه جای تابع makeNoteDom به d تغییر می دهد و بنابراین عملکرد را حفظ می کند. اما 13 کاراکتر headerElement در هر سه مکان ظاهر شده به یک کاراکتر کوتاه شده است. در مجموع 36 کاراکتر صرفه جویی می شود.

کامپایل با SIMPLE_OPTIMIZATIONS همیشه عملکرد جاوا اسکریپت معتبر از نظر نحوی را حفظ می کند، مشروط بر اینکه کد با استفاده از نام رشته ها به متغیرهای محلی دسترسی نداشته باشد (مثلاً با دستورات eval() ).

مراحل بعدی

اکنون که با SIMPLE_OPTIMIZATIONS و مکانیک های اولیه استفاده از این سرویس آشنا شدید، گام بعدی این است که با سطح تدوین ADVANCED_OPTIMIZATIONS آشنا شوید. این سطح به چند مرحله اضافی نیاز دارد تا اطمینان حاصل شود که جاوا اسکریپت شما قبل و بعد از کامپایل یکسان کار می کند، اما جاوا اسکریپت را حتی کوچکتر می کند. برای آشنایی با ADVANCED_OPTIMIZATIONS ، به کامپایل پیشرفته و موارد خارجی مراجعه کنید.