Gelişmiş derleme

Normal derleme süreci, Blockly'yi toplamda yaklaşık 720 KB (160 KB sıkıştırılmış) olan yarım düzine dosyaya indirmek için Google'ın online JavaScript derleyicisini kullanır. Alternatif olarak, Google'ın "ileri derleme" modundaki çevrimdışı JavaScript derleyicisi de kullanılabilir. Bu derleyicinin çeşitli avantajları vardır:

  • Tree shaking sayesinde toplam Blockly boyutu 300 KB'a (100 KB sıkıştırılmış) düşürüldü.
  • Yerel derleyici yürütme sayesinde daha hızlı derleme süreleri ve ağ trafiği olmaz.
  • Sınırsız derleme (online derleyici, hız sınırlamasına tabidir).

Kurulum

Bu kısa eğitici için Blockly kök dizininde yeni bir dizin oluşturarak başlayın.

Closure Compiler'ı indirin.

compiler.jar dosyasını indirip closure-compiler.jar olarak yeniden adlandırın ve dizininize yerleştirin.

Komut satırında şunu çalıştırarak Java çalışma zamanı ortamınızın derleyiciyi çalıştırabildiğini doğrulayın:

java -jar closure-compiler.jar --version

Ortak Metin

Öncelikle, minimum Blockly araç kutusunu ve içine yerleştirileceği div tanımlayan bir HTML dosyası oluşturun. Bunu yapmak için dizininizde şu kodu içeren index.html adlı bir dosya oluşturun:

<!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>

Blockly'ye giden yolunuz ve istediğiniz dil için dil yolunu (../msg/en.js) gerektiği şekilde düzenlediğinizden emin olun.

İkinci olarak, Blockly'yi ve gerekli ileti dosyalarını veya blok tanımlarını yükleyen, ardından Blockly'yi sağlanan div içine yerleştiren bir JavaScript dosyası oluşturun. Bunu yapmak için dizininizde main.js adlı bir dosya oluşturun ve bu kodu ekleyin:

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

Komut satırından Closure Compiler'ı çalıştırarak main.js, Blockly ve Closure Library'yi birlikte derleyin:

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

Alternatif olarak, gelişmiş derleme komut dosyamızı kullanarak:

 npm run test:compile:advanced

Her şeyin çalıştığını doğrulamak için bir tarayıcıyı index.html adresine yönlendirin.

Daha da Gelişmiş

Boyutu daha da küçültmek için uygulamanızın kullandığı Blockly bileşenlerini ekleyebilirsiniz. Örneğin, uygulamanız çöp kutusu içerecek şekilde yapılandırılmamışsa çöp kutusunu derlenen bileşenler listesinden kaldırabilirsiniz. Bunu yapmak için kodunuzdan Blockly.requires ile ilgili koşulu silin:

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

Bunun yerine core/requires.js dosyasını açın ve gerekli tüm ifadeleri kodunuza kopyalayın. Ardından, ihtiyacınız olmayanları yorum satırı yapabilirsiniz.

Closure Compiler'ın, derlenmiş çıkışta lisansları koruduğunu unutmayın. Boyutu daha da küçültmek için Google'ın Apache lisanslarını bu çıkış dosyasından kaldırabilirsiniz.

Closure Compiler'ın birçok özelliği ve seçeneği vardır. Dokümanlarını inceleyin.