常规的构建流程会使用 Google 的在线 JavaScript 编译器将 Blockly 缩减为五十个文件,总大小约为 720kb(压缩后为 160kb)。或者,用户可以在“高级编译”模式下使用 Google 的离线 JavaScript 编译器,这样做有诸多优势:
- 由于进行了摇树优化,Blockly 的总大小缩减到了 300kb(压缩后为 100kb)。
- 本地编译器执行可缩短构建时间,且无网络流量。
- 编译不受限制(在线编译器有速率限制)。
初始设置
就本最简教程而言,首先在 Blockly 根目录中创建一个新目录。
下载 Closure 编译器。
下载 compiler.jar,将其重命名为 closure-compiler.jar
,并将其放在您的目录中。
在命令行中运行以下命令,验证您的 Java 运行时环境是否可以运行编译器:
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 编译器来同时编译 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 编译器会在已编译的输出中保留许可。 您可以从此输出文件中删除 Google 的 Apache 许可,以进一步缩减文件的大小。
Closure 编译器提供了许多功能和选项,请查看其文档。