דחיסת קבצים באמצעות ה-API של Cloud Compiler Service

סקירה כללית

תקשורת עם ה-API תיארה את העקרונות הבסיסיים של תקשורת עם שירות מהדר סגירה, אבל היא רק ממחישה איך משתמשים בשירות כדי להסיר תגובות משורה אחת של JavaScript. במדריך הזה נדגים איך להשתמש בשירות Cloud Compiler בתרחיש התפתחות מציאותי יותר: עיבוד של קובץ JavaScript שלם כדי לצמצם משמעותית את הגודל.

המדריך הזה יוצא מנקודת הנחה שיש לכם היכרות בסיסית עם JavaScript ו-HTTP. הוא משתמש בסקריפט של Python לשליחת JavaScript לשירות Closure Compiler, אבל לא צריך לדעת איך להשתמש ב-Python.

1. דחיסת קובץ
2. שיפור הדחיסה
   1. עד כמה הקוד קטן יותר?
   2. איך השירות של מהדר סגירה הפך את התוכנית לקטנה יותר?
3. השלבים הבאים

דחיסת קבצים

הדוגמה תקשורת עם ה-API העבירה מחרוזת JavaScript כפרמטר של שורת פקודה לסקריפט ההידור שלנו. הגישה הזו לא תעבוד מאוד בתוכנית ריאליסטית בגודל מציאותי, אבל מחרוזת ה-JavaScript הופכת לא תקינה במהירות כשהקוד ארוך מכמה שורות. בתוכניות גדולות יותר, תוכלו להשתמש בפרמטר הבקשה 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();

אתם יכולים להעביר את התוכנית הזו לשירות מהדרים בנוחות יותר כקובץ מאשר כמחרוזת אחת גדולה. כדי לעבד קובץ באמצעות השירות:

1. שומרים את קובץ ה-JavaScript בקובץ.
2. אפשר להעלות את הקובץ לאינטרנט (לדוגמה, להעלות אותו לשרת האינטרנט).
3. יש להגיש בקשת POST לשירות מהדר סגירה כפי שמוצג בתקשורת עם ממשק ה-API, אבל הפרמטר js_code יחליף את הפרמטר code_url. הערך של code_url חייב להיות כתובת ה-URL של קובץ ה-JavaScript שנוצר בשלב 1.

לדוגמה, תוכלו למצוא את ה-JavaScript לדוגמה הזו בקובץ tutorial2.js. כדי לעבד את הקובץ הזה באמצעות ממשק ה-API של Colsure Compiler Service, צריך להחליף את תוכנית ה-python מתקשורת עם ה-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.

שולחים את הקוד לשירות מהדר סגירה עם הפקודה הבאה:

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

השירות מהדר סגירה מאחזר את הקובץ מ-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 החדש קטן ממחצית הגודל של המקור.

איך השירות של מהדר סגירה צמצם את התוכנית?

במקרה כזה, מהדר הסגר מגיע להפחתה חלקית גם על ידי שינוי שמות של משתנים מקומיים. לדוגמה, הקובץ המקורי כולל את שורת הקוד הבאה:

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

מהדר סגירה משנה את ההצהרה הזו ל:

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

מהדר סגירה משנה את הסמל headerElement ל-d בכל מקום בתוך הפונקציה makeNoteDom, ולכן שומר על הפונקציונליות. אבל 13 התווים של headerElement קוצרו לתו אחד בכל אחד משלושת המקומות שבהם הם מופיעים. כך, החיסכון הכולל יהיה 36 תווים.

השילוב עם SIMPLE_OPTIMIZATIONS תמיד שומר על הפונקציונליות של JavaScript מבחינה תחבירית, בתנאי שהקוד לא ניגש למשתנים מקומיים באמצעות שמות מחרוזות (לדוגמה, עם משפטי eval()).

השלבים הבאים

עכשיו, אחרי שלמדתם על SIMPLE_OPTIMIZATIONS ועל המנגנון הבסיסי של שימוש בשירות, השלב הבא הוא ללמוד על רמת האיסוף של ADVANCED_OPTIMIZATIONS. לרמה הזו נדרשים כמה שלבים נוספים כדי להבטיח ש-JavaScript יפעל בדיוק באותו אופן לפני ואחריו, אבל הוא גם מקטין את ה-JavaScript. למידע נוסף על ADVANCED_OPTIMIZATIONS, קראו את ההרחבה המתקדמת והתוספים.