הידור מתקדם

תהליך הבנייה הרגיל משתמש בקומפיילר JavaScript אונליין של Google כדי לצמצם את Blockly לחצי תריסר קבצים בגודל כולל של כ-720KB (160KB אחרי דחיסה). אפשרות אחרת היא להשתמש בקומפיילר JavaScript אופליין של Google במצב 'קומפילציה מתקדמת', שיש לו כמה יתרונות:

  • הגודל הכולל של Blockly הוקטן ל-300kb (100kb ב-zip) בעקבות tree shaking.
  • זמני בנייה מהירים יותר וללא תנועת רשת בגלל ביצוע קומפילציה מקומית.
  • קומפילציות ללא הגבלה (הקומפיילר אונליין מוגבל).

הגדרה

לצורך המדריך המינימלי הזה, מתחילים ביצירת ספרייה חדשה בספריית הבסיס של Blockly.

מורידים את Closure Compiler.

מורידים את compiler.jar, משנים את השם שלו ל-closure-compiler.jar וממקמים אותו בספרייה.

מריצים את הפקודה הבאה בשורת הפקודה כדי לוודא שסביבת זמן הריצה של Java יכולה להריץ את הקומפיילר:

java -jar closure-compiler.jar --version

Boiler Plate

קודם יוצרים קובץ HTML שמגדיר ארגז כלים מינימלי של Blockly ו-div שבו אפשר להטמיע אותו. כדי לעשות זאת, יוצרים קובץ בספרייה בשם index.html שמכיל את הקוד הזה:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly: Advanced Compilation</title>
  <script src="main_compressed.js"></script>
  <script src="../msg/en.js"></script>
</head>
<body>
  <h1>Blockly: Advanced Compilation</h1>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>
</body>
</html>

חשוב לערוך את נתיב השפה (../msg/en.js) בהתאם לנתיב אל Blockly ולשפה הרצויה.

בשלב השני, יוצרים קובץ JavaScript שמעמיס את Blockly ואת כל קובצי ההודעות או הגדרות הבלוקים הנדרשים, ואז מחדירים את Blockly ל-div שסופק. כדי לעשות זאת, יוצרים בספרייה קובץ בשם main.js שמכיל את הקוד הזה:

goog.provide('Main');
// Core
goog.require('Blockly.requires');
// Blocks
goog.require('Blockly.Constants.Logic');
goog.require('Blockly.Constants.Loops');
goog.require('Blockly.Constants.Math');
goog.require('Blockly.Constants.Text');

Main.init = function() {
  Blockly.inject('blocklyDiv', {
    'toolbox': document.getElementById('toolbox')
  });
};
window.addEventListener('load', Main.init);

Compile

קומפילציה של main.js,‏ Blockly ו-Closure Library ביחד באמצעות הפעלת Closure Compiler משורת הפקודה:

java -jar closure-compiler.jar --js='main.js' \
  --js='../blocks/**.js' \
  --js='../core/**.js' \
  --js='../generators/**.js' \
  --generate_exports \
  --externs ../externs/svg-externs.js \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --dependency_mode=PRUNE --entry_point=Main \
  --js_output_file main_compressed.js

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

 npm run test:compile:advanced

מפנים דפדפן אל index.html כדי לוודא שהכול פעל.

אפילו יותר מתקדם

כדי להקטין עוד יותר את הגודל, אפשר לכלול רק את רכיבי Blockly שהאפליקציה שלכם משתמשת בהם בפועל. לדוגמה, אם האפליקציה שלכם לא מוגדרת עם פח אשפה, אתם יכולים להסיר את פח האשפה מרשימת הרכיבים שנכללים בהידור. כדי לעשות את זה, צריך למחוק את הדרישה ל-Blockly.requires מהקוד:

// Core
goog.require('Blockly.requires');

במקום זאת, פותחים את core/requires.js ומעתיקים את כל הצהרות הדרישה לקוד. אחר כך אפשר להוסיף הערות לאלה שלא צריך.

חשוב לדעת: הכלי Closure Compiler שומר את הרישיונות בפלט המהודר. אפשר להסיר את רישיונות Apache של Google מקובץ הפלט הזה כדי להקטין עוד יותר את הגודל שלו.

ל-Closure Compiler יש הרבה תכונות ואפשרויות, כדאי לעיין במסמכי התיעוד.