本頁面由 Cloud Translation API 翻譯而成。

進階編譯

一般建構程序使用 Google 的線上 JavaScript 編譯器，將 Blockly 縮減至 720 KB (壓縮 160 kb) 的一半。或者，您也可以在「進階編譯」模式下使用 Google 的離線 JavaScript 編譯器，具有以下優點：

由於樹種晃動，因此區塊大小的總大小縮減至 300 KB (100 KB 壓縮)。
本機編譯器執行會導致建構時間更快，且沒有網路流量。
無限編譯 (線上編譯器設有頻率限制)，

設定

為了方便起見，請先在 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)。

接著，建立一個可載入 Blockly 和任何必要的訊息檔案或區塊定義的 JavaScript 檔案，然後將 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 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，確認一切運作正常。

進階編譯

設定

下載 Closure Compiler。

鍋爐

編譯

更多進階功能