Расширенная компиляция

Стандартный процесс сборки использует онлайн-компилятор JavaScript от Google, чтобы сократить Blockly до полудюжины файлов общим объёмом около 720 КБ (160 КБ в архиве). В качестве альтернативы можно использовать автономный компилятор JavaScript от Google в режиме «расширенной компиляции», который имеет ряд преимуществ:

  • Общий размер Blockly уменьшен до 300 Кб (100 Кб в архиве) из-за Tree Shaking.
  • Более быстрое время сборки и отсутствие сетевого трафика за счет локального выполнения компилятора.
  • Неограниченное количество компиляций (онлайн-компилятор имеет ограничение по скорости).

Настраивать

Для целей этого минимального руководства начните с создания нового каталога в корневом каталоге Blockly.

Загрузить компилятор замыканий.

Загрузите compiler.jar , переименуйте его в closure-compiler.jar и поместите в свой каталог.

Убедитесь, что ваша среда выполнения Java может запустить компилятор, выполнив следующую команду в командной строке:

java -jar closure-compiler.jar --version

Котельная плита

Сначала создайте HTML-файл, определяющий минимальный набор инструментов Blockly и div , в который его нужно вставить. Для этого создайте в вашем каталоге файл index.html со следующим кодом:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly: Advanced Compilation</title>
  <script src="main_compressed.js"></script>
  <script src="../msg/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/en.js ) в соответствии с вашим путем к Blockly и желаемым языком.

Во-вторых, создайте файл JavaScript, который загружает Blockly и все необходимые файлы сообщений или определения блоков, а затем внедряет Blockly в предоставленный div . Для этого создайте в вашем каталоге файл 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);

Компилировать

Скомпилируйте main.js , Blockly и Closure Library вместе, запустив Closure Compiler из командной строки:

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 сохраняет лицензии в скомпилированном файле. Вы можете удалить лицензии Apache от Google из этого файла, чтобы ещё больше уменьшить его размер.

У Closure Compiler много функций и опций, обязательно ознакомьтесь с их документацией .