Compilación avanzada

El proceso de compilación normal usa el compilador en línea de JavaScript 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 una "compilación avanzada" que tiene varias ventajas:

  • El tamaño total de Blockly se redujo a 300 KB (100 KB comprimidos) debido al movimiento de árboles.
  • 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

A los fines de este instructivo mínimo, comienza por crear un directorio nuevo en el directorio raíz de Blockly.

Descarga el compilador de cierres.

Descarga compiler.jar, cámbiale el nombre a closure-compiler.jar y colócalo en tu directorio.

Ejecuta el siguiente comando en la línea de comandos para verificar que tu entorno de ejecución de Java pueda ejecutar el compilador:

java -jar closure-compiler.jar --version

Plantilla

Primero, crea un archivo HTML que defina una caja de herramientas mínima de Blockly y un div en la que se inyecta. 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 a Blockly y tu lenguaje deseado.

En segundo lugar, crea un archivo JavaScript que cargue Blockly y cualquier archivo de mensaje o definición de bloque necesarios y, luego, inserte Blockly en la div proporcionada. 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 ejecutando 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

También puedes usar nuestra secuencia de comandos de compilación avanzada:

 npm run test:compile:advanced

Apunta un navegador a index.html para verificar que todo funcionó.

Aún más avanzado

Para reducciones de tamaño aún mayores, puedes incluir solo los componentes de Blockly. que tu aplicación usa realmente. 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 de require en tu código. Luego, puedes comentar los 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 el el tamaño aún más.

Closure Compiler tiene muchas funciones y opciones. documentación.