El proceso de compilación normal usa el compilador de JavaScript en línea de Google para reducir Blockly a media docena de archivos que suman alrededor de 720 KB (160 KB comprimidos). Como alternativa, se puede usar el compilador de JavaScript sin conexión de Google en el modo de "compilación avanzada", que tiene varias ventajas:
- El tamaño total de Blockly se redujo a 300 KB (100 KB comprimido) debido a la eliminación de código no utilizado.
- Tiempos de compilación más rápidos y sin tráfico de red debido a la ejecución del compilador local.
- Compilaciones ilimitadas (el compilador en línea tiene un límite de frecuencia).
Configuración
Para los fines de este instructivo mínimo, comienza por crear un directorio nuevo en el directorio raíz de Blockly.
Descarga Closure Compiler.
Descarga compiler.jar, cámbiale el nombre a closure-compiler.jar y colócalo en tu directorio.
Para verificar que tu Java Runtime Environment pueda ejecutar el compilador, ejecuta lo siguiente en la línea de comandos:
java -jar closure-compiler.jar --version
Placa de soporte
Primero, crea un archivo HTML que defina una caja de herramientas de Blockly mínima y un div en el que insertarla. Para ello, crea un archivo en tu directorio llamado index.html que contenga este código:
<!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>
Asegúrate de editar la ruta de acceso del idioma (../msg/en.js) según sea necesario para tu ruta de acceso a Blockly y para el idioma que desees.
En segundo lugar, crea un archivo JavaScript que cargue Blockly y los archivos de mensajes o las definiciones de bloques necesarios, y, luego, inyecta Blockly en el div proporcionado.
Para ello, crea un archivo en tu directorio llamado main.js que contenga este código:
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);
Compilación
Ejecuta el compilador de Closure desde la línea de comandos para compilar main.js, Blockly y la biblioteca de Closure juntos:
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
O bien, puedes usar nuestra secuencia de comandos de compilación avanzada:
npm run test:compile:advanced
Dirige un navegador a index.html para verificar que todo haya funcionado.
Aún más avanzado
Para reducir aún más el tamaño, puedes incluir solo los componentes de Blockly que tu aplicación realmente usa. Por ejemplo, si tu aplicación no está configurada para tener una papelera, puedes quitarla de la lista de componentes que se compilan. Para ello, borra el requisito de Blockly.requires de tu código:
// Core
goog.require('Blockly.requires');
En su lugar, abre core/requires.js y copia todas las sentencias require en tu código. Luego, puedes comentar las que no necesites.
Ten en cuenta que Closure Compiler conserva las licencias en el resultado compilado. Puedes quitar las licencias de Apache de Google de este archivo de salida para reducir aún más su tamaño.
El compilador de Closure tiene muchas funciones y opciones. Consulta su documentación.