高度なコンパイル

通常のビルドプロセスでは、Google のオンライン JavaScript コンパイラを使用して Blockly を約 720 KB（圧縮時 160 KB）の 6 つのファイルに縮小します。別の方法として、Google のオフライン JavaScript コンパイラを「高度なコンパイル」モードで使用することもできます。このモードには次のような利点があります。

  • ツリー シェイキングにより、Blockly の合計サイズが 300 KB（100 KB に圧縮）に縮小されました。
  • ローカル コンパイラ実行により、ビルド時間が短縮され、ネットワーク トラフィックが発生しません。
  • コンパイルは無制限（オンライン コンパイラにはレート制限があります）。

セットアップ

この最小限のチュートリアルでは、まず Blockly のルート ディレクトリに新しいディレクトリを作成します。

Closure Compiler をダウンロードします。

compiler.jar をダウンロードして closure-compiler.jar に名前を変更し、ディレクトリに配置します。

コマンドラインで次のコマンドを実行して、Java Runtime Environment でコンパイラを実行できることを確認します。

java -jar closure-compiler.jar --version

ボイラープレート

まず、最小限の Blockly ツールボックスと、それを挿入する div を定義する HTML ファイルを作成します。そのためには、ディレクトリに 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）を必ず編集してください。

次に、Blockly と必要なメッセージ ファイルまたはブロック定義を読み込み、提供された div に Blockly を挿入する JavaScript ファイルを作成します。そのためには、ディレクトリに 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 を開き、すべての require ステートメントをコードにコピーします。不要なものはコメントアウトできます。

Closure Compiler は、コンパイルされた出力でライセンスを保持します。この出力ファイルから Google の Apache ライセンスを削除して、サイズをさらに小さくすることもできます。

Closure Compiler には多くの機能とオプションがあります。ドキュメントをご覧ください。