高度なコンパイル

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