通常のビルドプロセスでは、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 には多くの機能とオプションがあります。ドキュメントをご覧ください。