通常のビルドプロセスでは、Google のオンライン JavaScript コンパイラを使用して、Blockly のファイル数を 6 個（合計で約 720 KB）に縮小します（圧縮した 160 KB）。別の方法として、Google のオフライン JavaScript コンパイラを「高度なコンパイル」モードで使用することもできます。これにはいくつかの利点があります。
- ツリー シェイキングにより、Blockly の合計サイズが 300 KB（圧縮して 100 KB）に縮小。
- ローカル コンパイラの実行により、ビルド時間が短縮され、ネットワーク トラフィックが発生しません。
- コンパイルは無制限（オンライン コンパイラにはレート制限があります）。
設定
この最小限のチュートリアルでは、まず Blockly のルート ディレクトリに新しいディレクトリを作成します。
Closure Compiler をダウンロードする
compiler.jar をダウンロードして、名前を closure-compiler.jar に変更して、ディレクトリに配置します。
コマンドラインで次のコマンドを実行して、Java ランタイム環境でコンパイラを実行できることを確認します。
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/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）を必ず編集してください。
次に、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 ステートメントをコードにコピーします。不要な場合はコメントアウトできます。
クロージャ コンパイラはコンパイルされた出力でライセンスを保持します。 この出力ファイルから Google の Apache ライセンスを削除しても、サイズをさらに小さくすることができます。
Closure Compiler には多くの機能とオプションがあります。ドキュメントをご覧ください。