常规build 流程使用 Google 的在线 JavaScript 编译器将 Blockly 缩减为六个文件,总大小约为 720 KB(压缩后为 160 KB)。或者,您也可以使用 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/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/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 编译器具有许多功能和选项,请务必查看其文档。