В обычном процессе сборки используется онлайн-компилятор JavaScript от Google, чтобы сократить Blockly до полудюжины файлов общим размером около 720 КБ (160 КБ в архиве). В качестве альтернативы можно использовать автономный компилятор JavaScript Google в режиме «расширенной компиляции», который имеет ряд преимуществ:
- Общий размер Blockly уменьшен до 300 КБ (100 КБ в архиве) из-за тряски дерева.
- Более быстрое время сборки и отсутствие сетевого трафика благодаря локальному выполнению компилятора.
- Неограниченное количество компиляций (онлайн-компилятор ограничен по скорости).
Настраивать
Для целей этого минимального руководства начните с создания нового каталога в корневом каталоге 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/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 и желаемому языку.
Во-вторых, создайте файл 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 сохраняет лицензии в скомпилированных выходных данных. Не стесняйтесь удалять лицензии Google Apache из этого выходного файла, чтобы еще больше уменьшить его размер.
Компилятор Closure имеет множество функций и опций, ознакомьтесь с их документацией .