ক্লোজার কম্পাইলার সার্ভিস এপিআই দিয়ে ফাইল কম্প্রেস করা

ক্লোজার কম্পাইলার পরিষেবা অবহেলিত, এবং সরানো হবে। পরিবর্তে স্থানীয়ভাবে কম্পাইলার চালানো বিবেচনা করুন.

ওভারভিউ

API এর সাথে যোগাযোগ করা ক্লোজার কম্পাইলার পরিষেবার সাথে কীভাবে যোগাযোগ করতে হয় তার মূল বিষয়গুলি বর্ণনা করে, তবে এটি কেবলমাত্র জাভাস্ক্রিপ্টের একক লাইন থেকে মন্তব্য ছিন্ন করতে পরিষেবাটি ব্যবহার করে চিত্রিত করে। এই টিউটোরিয়ালটি আরও বাস্তবসম্মত বিকাশের দৃশ্যে ক্লোজার কম্পাইলার পরিষেবাটি কীভাবে ব্যবহার করতে হয় তা ব্যাখ্যা করে: একটি উল্লেখযোগ্য আকার হ্রাস পেতে একটি সম্পূর্ণ জাভাস্ক্রিপ্ট ফাইল প্রক্রিয়াকরণ।

এই টিউটোরিয়ালটি অনুমান করে যে আপনার জাভাস্ক্রিপ্ট এবং HTTP এর সাথে প্রাথমিক পরিচিতি রয়েছে। যদিও এটি ক্লোজার কম্পাইলার পরিষেবাতে জাভাস্ক্রিপ্ট জমা দেওয়ার জন্য একটি পাইথন স্ক্রিপ্ট ব্যবহার করে, উদাহরণটি অনুসরণ করার জন্য আপনাকে পাইথন জানতে হবে না।

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

আপনি এই প্রোগ্রামটিকে ক্লোজার কম্পাইলার পরিষেবাতে একটি বড় স্ট্রিংয়ের চেয়ে ফাইল হিসাবে আরও সুবিধাজনকভাবে পাস করতে পারেন। পরিষেবার সাথে একটি ফাইল প্রক্রিয়া করতে এই পদক্ষেপগুলি অনুসরণ করুন:

1. একটি ফাইলে জাভাস্ক্রিপ্ট সংরক্ষণ করুন।
2. ফাইলটিকে ওয়েবে অ্যাক্সেসযোগ্য করুন (উদাহরণস্বরূপ, এটি আপনার ওয়েব সার্ভারে আপলোড করে)।
3. ক্লোজার কম্পাইলার পরিষেবাতে একটি POST অনুরোধ করুন যেমন API এর সাথে যোগাযোগ করা হয়েছে , কিন্তু code_url প্যারামিটারের জন্য একটি js_code প্যারামিটার প্রতিস্থাপন করুন। code_url এর মান অবশ্যই ধাপ 1-এ তৈরি জাভাস্ক্রিপ্ট ফাইলের URL হতে হবে।

উদাহরণস্বরূপ, আপনি এই উদাহরণের জন্য জাভাস্ক্রিপ্টটি tutorial2.js ফাইলে খুঁজে পেতে পারেন। এই ফাইলটিকে ক্লোজার কম্পাইলার সার্ভিস API দিয়ে প্রক্রিয়া করতে, 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()

দ্রষ্টব্য: এই উদাহরণটি পুনরুত্পাদন করতে, উইন্ডোজ ব্যবহারকারীদের পাইথন ইনস্টল করতে হতে পারে। উইন্ডোজের অধীনে পাইথন ইনস্টল এবং ব্যবহার করার নির্দেশাবলীর জন্য পাইথন উইন্ডোজ FAQ দেখুন।

নিম্নলিখিত কমান্ড দিয়ে ক্লোজার কম্পাইলার পরিষেবাতে কোডটি পাঠান:

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

ক্লোজার কম্পাইলার পরিষেবা 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'),
  ])

কম্প্রেশন উন্নতি

এখন পর্যন্ত উদাহরণগুলি 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

নতুন জাভাস্ক্রিপ্টটি আসল আকারের অর্ধেকেরও কম।

কিভাবে ক্লোজার কম্পাইলার সার্ভিস প্রোগ্রামটিকে ছোট করেছে?

এই ক্ষেত্রে, ক্লোজার কম্পাইলার স্থানীয় ভেরিয়েবলের নাম পরিবর্তন করে আংশিক আকারে হ্রাস অর্জন করে। উদাহরণস্বরূপ, মূল ফাইলটিতে কোডের এই লাইনটি অন্তর্ভুক্ত রয়েছে:

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

ক্লোজার কম্পাইলার এই বিবৃতিটি এতে পরিবর্তন করে:

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

ক্লোজার কম্পাইলার headerElement ফাংশনের মধ্যে সর্বত্র চিহ্ন হেডার makeNoteDom d তে পরিবর্তন করে এবং এইভাবে কার্যকারিতা সংরক্ষণ করে। কিন্তু headerElement 13টি অক্ষর তিনটি যেখানে তারা প্রদর্শিত হয় তার প্রতিটিতে একটি করে অক্ষর সংক্ষিপ্ত করা হয়েছে। এটি 36টি অক্ষরের মোট সঞ্চয় দেয়।

SIMPLE_OPTIMIZATIONS এর সাথে সংকলন সর্বদা সিনট্যাক্টিকভাবে বৈধ জাভাস্ক্রিপ্টের কার্যকারিতা সংরক্ষণ করে, তবে শর্ত থাকে যে কোডটি স্ট্রিং নাম ব্যবহার করে স্থানীয় ভেরিয়েবল অ্যাক্সেস না করে (উদাহরণস্বরূপ, eval() স্টেটমেন্টের সাথে)।

পরবর্তী পদক্ষেপ

এখন যেহেতু আপনি SIMPLE_OPTIMIZATIONS এবং পরিষেবাটি ব্যবহার করার প্রাথমিক মেকানিক্সের সাথে পরিচিত, পরবর্তী পদক্ষেপটি হল ADVANCED_OPTIMIZATIONS সংকলন স্তর সম্পর্কে জানা৷ আপনার জাভাস্ক্রিপ্ট সংকলনের আগে এবং পরে একইভাবে কাজ করে তা নিশ্চিত করতে এই স্তরের জন্য কিছু অতিরিক্ত পদক্ষেপের প্রয়োজন, তবে এটি জাভাস্ক্রিপ্টকে আরও ছোট করে তোলে। ADVANCED_OPTIMIZATIONS সম্পর্কে জানতে উন্নত কম্পাইলেশন এবং এক্সটার্নস দেখুন।