אוסף מתקדם

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

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

הגדרה

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

הורדת הכלי 'מהדר החסימות'

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

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

java -jar closure-compiler.jar --version

צלחת דוד

קודם יוצרים קובץ 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/js/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/js/en.js) לפי הצורך הנתיב שלכם ל-Blockly ולשפה הרצויה.

בשלב השני, יוצרים קובץ JavaScript שיטמיע את Blockly ב-div שסיפקתם, אחרי שהוא יטען את Blockly ואת כל קובצי ההודעות או הגדרות הבלוק הנדרשים. לשם כך, יוצרים קובץ בספרייה בשם 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 ביחד, מריצים את הפקודה מהדר החסימות משורת הפקודה:

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 ומעתיקים את כל הצהרות ה-require לקוד. לאחר מכן תוכלו להסיר את התגובות שאתם לא צריכים.

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

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