高度なコンパイル

このページの内容
セットアップ

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