Advanced Compilation.

The regular build process uses Google's online JavaScript compiler to reduce Blockly to a half a dozen files totaling about 720kb (160kb zipped). Alternatively one can use the Google's offline JavaScript compiler in "advanced compilation" mode which has a number of advantages:

  • Total Blockly size reduced to 300kb (100kb zipped) due to tree shaking.
  • Faster build times and no network traffic due to local compiler execution.
  • Unlimited compilations (the online compiler is rate-limited).

Setup

For the purposes of this minimal tutorial, start by creating a new directory in the Blockly root directory.

Download Closure Compiler.

Download closure-compiler-vxxxxxxxx.jar, rename it to closure-compiler.jar, and place it in your directory.

Verify that your Java Runtime Environment can run the compiler by running this on the command line:

java -jar closure-compiler.jar --version

Install Closure Library.

Download a copy of the Closure Library in a directory that is a sibling of the Blockly root directory. More info...

Boiler Plate

First, create an HTML file which defines a minimal Blockly toolbox and a div in which to inject it. To do so, create a file in your directory called index.html that contains this code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly: Advanced Compilation</title>
  <script src="main_compressed.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>

Second, create a JavaScript file that loads Blockly and any necessary message files or block definitions, then injects Blockly into the provided div. To do so, create a file in your directory called main.js that contains this code:

goog.provide('Main');
// Messages (in some language)
goog.require('Blockly.Msg.en');
// Core
goog.require('Blockly');
// 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);

Compile

Compile main.js, Blockly, and Closure Library together by running the Closure Compiler from the command line:

java -jar closure-compiler.jar --js='main.js' \
  --js='../**.js' \
  --js='!../externs/**.js' \
  --js='!../msg/messages.js' \
  --js='../../closure-library/closure/goog/**.js' \
  --js='../../closure-library/third_party/closure/goog/**.js' \
  --generate_exports \
  --externs ../externs/svg-externs.js \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --dependency_mode=STRICT --entry_point=Main \
  --js_output_file main_compressed.js

Point a browser at index.html to verify everything worked.

Note that the Closure Compiler preserves licences in the compiled output. Feel free to strip Google's Apache licences from this output file to reduce the size further.

The Closure Compiler has a lot of features and options, do check out their documentation.