क्लोज़र कंपाइलर सेवा एपीआई से फ़ाइलें कंप्रेस करना

क्लोज़र कंपाइलर की सेवा बंद कर दी गई है और इसे हटा दिया जाएगा. इसके बजाय, कंपाइलर को स्थानीय तौर पर चलाएं.

खास जानकारी

API के साथ संपर्क करना में क्लोज़र कंपाइलर सेवा से संचार करने की बुनियादी बातों के बारे में बताया गया था. हालांकि, उसे सिर्फ़ सेवा की मदद से JavaScript की सिर्फ़ एक लाइन से टिप्पणियां हटाने के बारे में बताया गया था. यह ट्यूटोरियल, इस बात को दिखाता है कि क्लोज़र कंपाइलर की सेवा को इस्तेमाल करने के ज़्यादा सही उदाहरण को कैसे इस्तेमाल किया जा सकता है: साइज़ में बहुत ज़्यादा कमी लाने के लिए, पूरी JavaScript फ़ाइल को प्रोसेस करना.

इस ट्यूटोरियल में यह माना जाता है कि आपको JavaScript और एचटीटीपी की बुनियादी जानकारी है. हालांकि, यह Closure कंपाइलर सेवा में JavaScript को सबमिट करने के लिए Python स्क्रिप्ट का उपयोग करता है, लेकिन उदाहरण का पालन करने के लिए आपको Python की जानकारी होना ज़रूरी नहीं है.

  1. फ़ाइल कंप्रेस करना
  2. कंप्रेशन को बेहतर बनाना
    1. कोड कितना छोटा है?
    2. क्लोज़र कंपाइलर की सेवा से कार्यक्रम कितना छोटा हो गया?
  3. अगले कदम

फ़ाइल कंप्रेस करना

एपीआई के साथ बातचीत करने के उदाहरण में, JavaScript स्ट्रिंग को कमांड लाइन पैरामीटर के तौर पर, हमारी कंपाइलेशन स्क्रिप्ट में पास किया गया है. हालांकि, यह तरीका असल में आकार वाले JavaScript प्रोग्राम के लिए बहुत अच्छी तरह से काम नहीं करेगा. इसकी वजह यह है कि कोड को तय की गई संख्या से ज़्यादा समय तक इस्तेमाल करने पर, JavaScript स्ट्रिंग जल्दी ही बंद हो जाती है. बड़े प्रोग्राम के लिए, code_url प्रोसेस पैरामीटर का इस्तेमाल करके यह प्रोसेस किया जा सकता है कि JavaScript फ़ाइल का नाम क्या है. js_code के लिए, code_url का इस्तेमाल किया जा सकता है या 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();

इस प्रोग्राम को क्लोज़र कंपाइलर सेवा में, एक बड़ी स्ट्रिंग के बजाय फ़ाइल के तौर पर ज़्यादा आसानी से पास किया जा सकता है. सेवा के साथ फ़ाइल प्रोसेस करने के लिए यह तरीका अपनाएं:

  1. JavaScript को फ़ाइल में सेव करें.
  2. फ़ाइल को वेब पर ऐक्सेस करने लायक बनाएं (उदाहरण के लिए, उसे अपने वेब सर्वर पर अपलोड करके).
  3. एपीआई के साथ कम्यूनिकेट करना में दिखाए गए क्लोज़र कंपाइलर सेवा के लिए पोस्ट अनुरोध करें, लेकिन js_code पैरामीटर के लिए code_url पैरामीटर बदलें. code_url की वैल्यू, पहले चरण में बनाई गई JavaScript फ़ाइल का यूआरएल होनी चाहिए.

उदाहरण के लिए, फ़ाइल tutorial2.js में इस उदाहरण के लिए JavaScript देखा जा सकता है. इस फ़ाइल को क्लोज़र कंपाइलर सर्विस एपीआई से प्रोसेस करने के लिए, पायथॉन प्रोग्राम में बदलाव करें. इसके लिए, एपीआई का इस्तेमाल करें को 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 इंस्टॉल करना पड़ सकता है. Windows में Python इंस्टॉल करने और इसका इस्तेमाल करने के निर्देश पाने के लिए, Python Windows से जुड़े अक्सर पूछे जाने वाले सवाल देखें.

यह तय करने के लिए, स्लैश क्लोज़र कंपाइलर सेवा को कोड भेजें:

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

Closure कंपाइलर सेवा 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'),
  ])

कंप्रेस करने की प्रक्रिया को बेहतर बनाना

अब तक के उदाहरणों में WHITESPACE_ONLY के compilation_level का इस्तेमाल किया गया है, जो सिर्फ़ टिप्पणियां और खाली जगह हटाता है. 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, ओरिजनल साइज़ के आधे से कम है.

क्लोज़र कंपाइलर सेवा ने इस प्रोग्राम को कैसे छोटा किया?

इस मामले में, क्लोज़र कंपाइलर स्थानीय वैरिएबल का नाम बदलकर उन हिस्सों के आकार में कमी हासिल करता है. उदाहरण के लिए, मूल फ़ाइल में कोड की यह लाइन शामिल है: 

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

क्लोज़र कंपाइलर इस स्टेटमेंट को इसमें बदल देता है: 

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

क्लोज़र कंपाइलर सिंबल को headerElement d से makeNoteDom हर जगह बदल देता है और इस तरह फ़ंक्शन को सुरक्षित रखता है. हालांकि, headerElement के 13 वर्णों में से हर एक को एक ही वर्ण में दिखाया गया है. इससे 36 वर्णों की कुल बचत होती है.

SIMPLE_OPTIMIZATIONS के साथ मिलकर काम करने पर, सिंटैक्स के हिसाब से मान्य JavaScript का फ़ंक्शन सुरक्षित रहता है. हालांकि, ऐसा करने पर कोड, स्ट्रिंग के नामों का इस्तेमाल करके, लोकल वैरिएबल को ऐक्सेस नहीं कर पाता है. उदाहरण के लिए, eval() स्टेटमेंट.

अगले चरण

अब जब आप SIMPLE_OPTIMIZATIONS और इस सेवा का इस्तेमाल करने की बुनियादी तकनीकों से परिचित हैं, तो अगला चरण है ADVANCED_OPTIMIZATIONS कंपाइलेशन लेवल के बारे में जानना. इस लेवल में कुछ अतिरिक्त चरणों की ज़रूरत होती है. इससे, यह पक्का किया जा सकता है कि आपकी JavaScript, कंपाइलेशन से पहले और बाद में एक ही तरह से काम करे. हालांकि, इससे JavaScript और छोटी हो जाती है. ADVANCED_OPTIMIZATIONS के बारे में जानने के लिए, बेहतर कंपाइलेशन और एक्सटेंशन देखें.