通常のビルドプロセスでは、Google のオンライン JavaScript コンパイラを使用して Blockly のサイズを 60 個に減らし、合計約 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>
必要に応じて言語パス(../msg/js/en.js
)を編集し、
Blockly へのパスとご希望の言語で行います
次に、Blockly と必要なメッセージを読み込む JavaScript ファイルを作成します。
次に、指定された div に Blockly を挿入します。
これを行うには、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 には多くの機能とオプションが用意されています。 ドキュメントをご覧ください。