बेहतर कंपाइलेशन

सामान्य बिल्ड प्रोसेस में, Google के ऑनलाइन JavaScript कंपाइलर का इस्तेमाल किया जाता है. इससे Blockly को छह फ़ाइलों में बांटा जाता है, जिनका कुल साइज़ 720 केबी (ज़िप किया गया साइज़ 160 केबी) होता है. इसके अलावा, "बेहतर कंपाइलेशन" में Google के ऑफ़लाइन JavaScript कंपाइलर का इस्तेमाल भी किया जा सकता है कई फ़ायदे हैं:

पेड़ के हिलने की वजह से, बड़ा साइज़ और कुल साइज़ घटकर 300 केबी (100 केबी ज़िप किया गया) हो गया.
लोकल कंपाइलर की प्रोसेस की वजह से, बिल्ड में लगने वाला समय कम होता है और नेटवर्क ट्रैफ़िक नहीं आता.
अनलिमिटेड कंपाइलर का इस्तेमाल करें (ऑनलाइन कंपाइलर की प्रोसेस सीमित होती है).

सेटअप

इस छोटे से ट्यूटोरियल को बनाने के लिए, Blockly रूट डायरेक्ट्री में एक नई डायरेक्ट्री बनाएं.

क्लोज़र कंपाइलर डाउनलोड करें.

compiler.jar डाउनलोड करें और इसका नाम बदलकर closure-compiler.jar करें. इसके बाद, इसे अपनी डायरेक्ट्री में डालें.

कमांड लाइन पर यह कमांड चलाकर पुष्टि करें कि आपका Java Runtime Environment, कंपाइलर को चला सकता है:

java -jar closure-compiler.jar --version

बॉयलर प्लेट

सबसे पहले, एक एचटीएमएल फ़ाइल बनाएं. इसमें, 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) में बदलाव करें ब्लॉकली और अपनी मनचाही भाषा के लिए आपका पाथ.

दूसरा, एक 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);

संकलित करें

Chrome ब्राउज़र की मदद से, main.js, Blockly, और Close Library को एक साथ कंपाइल करें: कमांड लाइन से कंपाइलर बंद करना:

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 खोलें और सभी ज़रूरी स्टेटमेंट को यहां कॉपी करें आपका कोड. इसके बाद, आपको जिन ऐप्लिकेशन की ज़रूरत नहीं है उन्हें टिप्पणी के तौर पर मार्क करें.

ध्यान दें कि 'क्लोज़र कंपाइलर', कंपाइल किए गए आउटपुट में लाइसेंस सुरक्षित रखता है. आउटपुट फ़ाइल का साइज़ कम करने के लिए, इसमें Google के Apache लाइसेंस हटाए जा सकते हैं.

Closure Compiler में कई सुविधाएं और विकल्प हैं. इनके बारे में जानने के लिए, दस्तावेज़ देखें.