El proceso de compilación habitual utiliza el compilador JavaScript en línea de Google para reducir Blockly a media docena de archivos con un total de alrededor de 720 KB (160 KB comprimidos). De manera alternativa, se puede usar el compilador JavaScript sin conexión de Google en el modo de "compilación avanzada", que presenta varias ventajas:
- El tamaño total de Blockly se redujo a 300 KB (100 KB comprimidos) debido a la sacudida de árboles.
- Tiempos de compilación más rápidos y sin tráfico de red debido a la ejecución local del compilador.
- Compilaciones ilimitadas (el compilador en línea tiene un límite de frecuencia).
Configuración
A 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 el directorio.
Para verificar que Java Runtime Environment pueda ejecutar el compilador, ejecuta lo siguiente en la línea de comandos:
java -jar closure-compiler.jar --version
Placa de caldera
Primero, crea un archivo HTML que defina una caja de herramientas mínima de Blockly y un div para 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/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>
Asegúrate de editar la ruta de acceso del idioma (../msg/js/en.js) según sea necesario para tu ruta de acceso a Blockly y para tu idioma deseado.
Luego, crea un archivo JavaScript que cargue Blockly y todos los archivos de mensajes o definiciones de bloque necesarios y, luego, inserte Blockly en el elemento 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
Compila main.js, Blockly y Closure Library en conjunto; para ello, ejecuta el Closure Compiler desde la línea de comandos:
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 mediante nuestra secuencia de comandos de compilación avanzada:
npm run test:compile:advanced
Apunta un navegador a index.html para verificar que todo funcionó correctamente.
Mucho más avanzado
Para reducciones de tamaño aún mayores, 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 en los que se compila. 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 declaraciones exigir en tu código. Luego, puedes comentar las que no necesites.
Ten en cuenta que el 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 el tamaño.
El Closure Compiler tiene muchas funciones y opciones. Consulta su documentación.