一般建構程序使用 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
,確認一切運作正常。
更多進階功能
如要進一步縮減大小,可以只加入應用程式實際使用的 Blockly 元件。例如,若應用程式未設定垃圾桶,您便可以從編譯的元件清單中移除垃圾桶。方法是從程式碼中刪除 Blockly.requires
的要求:
// Core goog.require('Blockly.requires');
開啟對應的位置,開啟 core/requires.js
並將所有需要陳述式複製到程式碼中。然後,您可以將不需要的註解排除。
請注意,Closure Compiler 會在已編譯的輸出結果中保留授權。 您也可以從這個輸出檔案中移除 Google 的 Apache 授權,進一步縮減大小。
Closure Compiler 有許多功能和選項,請參閱其說明文件。