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

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

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

सेटअप

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

बंद करने वाले कंपाइलर को डाउनलोड करें.

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

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

java -jar closure-compiler.jar --version

बॉयलर प्लेट

सबसे पहले, एक एचटीएमएल फ़ाइल बनाएं जो एक कम से कम Blockly टूलबॉक्स और उसे इंजेक्ट करने के लिए, एक डीआईवी के बारे में बताती हो. ऐसा करने के लिए, अपनी डायरेक्ट्री में 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 और किसी भी ज़रूरी मैसेज फ़ाइल या ब्लॉक परिभाषा को लोड करती हो. इसके बाद, दिए गए 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);

संकलित करें

कमांड लाइन से क्लोज़र कंपाइलर चलाकर, main.js, ब्लॉकली, और क्लोज़र लाइब्रेरी को एक साथ कंपाइल करें:

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.requires की ज़रूरी शर्त मिटाएं:

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

इसकी जगह, core/requires.js खोलें और सभी ज़रूरी स्टेटमेंट को अपने कोड में कॉपी करें. इसके बाद, उन विकल्पों पर टिप्पणी करें जिनकी आपको ज़रूरत नहीं है.

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

क्लोज़र कंपाइलर में कई सुविधाएं और विकल्प मौजूद हैं. उनका दस्तावेज़ देखें.