進階編譯

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

由於樹狀結構搖動，Blockly 的總大小已縮減至 300kb (壓縮後為 100kb)。
本機編譯器執行作業會縮短建構時間，且不會產生網路流量。
編譯次數不限 (線上編譯器有速率限制)。

設定

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

下載 Closure Compiler。

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

透過執行下列指令，驗證 Java Runtime Environment 是否能執行編譯器：

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>

請務必依據 Blockly 路徑和所需語言編輯語言路徑 (../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);

編譯

透過在指令列中執行 Closure Compiler，將 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 有許多功能和選項，請參閱說明文件。