高级编译

常规构建流程会使用 Google 的在线 JavaScript 编译器将 Blockly 缩减为六个，总大小约为 720kb（压缩后为 160kb）。或者，您也可以在“高级编译”模式下使用 Google 的离线 JavaScript 编译器，这种模式具有多种优势：

由于摇树优化，块总大小缩减至 300kb（压缩后为 100kb）。
缩短了构建时间，而且由于本地编译器执行而没有网络流量。
编译不受限制（在线编译器有速率限制）。

设置

在本教程中，我们只会介绍最基本的知识，因此首先需要在 Blockly 根目录中创建一个新目录。

下载 Closure Compiler。

下载 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 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 编译器提供了许多功能和选项文档。