進階編譯

一般的建構程序會使用 Google 的線上 JavaScript 編譯器，將 Blockly 縮減為約 720 KB 的半打檔案 (壓縮後為 160 KB)。或者，您也可以在「進階編譯」模式中使用 Google 的離線 JavaScript 編譯器，這有許多優點：

  • 由於樹狀結構篩除功能，Blockly 總大小縮減至 300 KB (壓縮後為 100 KB)。
  • 由於編譯器在本機執行，因此建構時間更快，也不會產生網路流量。
  • 編譯次數不限 (線上編譯器有速率限制)。

設定

為配合本教學課程，請先在 Blockly 根目錄中建立新目錄。

下載 Closure Compiler。

下載 compiler.jar，將其重新命名為 closure-compiler.jar，然後放在目錄中。

在指令列執行下列指令，確認 Java Runtime Environment 可以執行編譯器：

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);

編譯

從指令列執行 Closure 編譯器，一併編譯 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 具有許多功能和選項，請參閱相關說明文件。