Compilation avancée

Le processus de compilation standard utilise le compilateur JavaScript en ligne de Google pour réduire Blockly à une demi-douzaine de fichiers totalisant environ 720 ko (160 ko compressés). Vous pouvez également utiliser le compilateur JavaScript hors connexion de Google en mode "compilation avancée", qui présente plusieurs avantages :

  • Taille totale de Blockly réduite à 300 ko (100 ko compressés) en raison de l'élagage d'arbre.
  • Des durées de compilation plus rapides et l'absence de trafic réseau grâce à l'exécution du compilateur local.
  • Compilations illimitées (le compilateur en ligne est limité en débit).

Configuration

Pour les besoins de ce tutoriel minimal, commencez par créer un répertoire dans le répertoire racine Blockly.

Téléchargez Closure Compiler.

Téléchargez compiler.jar, renommez-le closure-compiler.jar et placez-le dans votre répertoire.

Vérifiez que votre environnement d'exécution Java peut exécuter le compilateur en exécutant cette via la ligne de commande:

java -jar closure-compiler.jar --version

Texte passe-partout

Commencez par créer un fichier HTML qui définit une boîte à outils Blockly minimale et une div dans laquelle l'injecter. Pour ce faire, créez un fichier nommé index.html dans votre répertoire contenant le code suivant :

<!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>

Veillez à modifier le chemin de langue (../msg/js/en.js) comme requis pour votre chemin vers Blockly et pour le langage de votre choix.

Ensuite, créez un fichier JavaScript qui charge Blockly et tous les fichiers de messages ou définitions de blocs nécessaires, puis injecte Blockly dans la div fournie. Pour ce faire, créez un fichier dans votre répertoire appelé main.js contenant le code suivant :

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);

Compiler

Compilez main.js, Blockly et la bibliothèque Closure ensemble en exécutant le compilateur Closure à partir de la ligne de commande :

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

Vous pouvez également utiliser notre script de compilation avancé :

 npm run test:compile:advanced

Pointez un navigateur sur index.html pour vérifier que tout a fonctionné.

Paramètres encore plus avancés

Pour réduire encore plus la taille, vous ne pouvez inclure que les composants Blockly. utilisés par votre application. Par exemple, si votre application configuré pour disposer d'une corbeille, vous pouvez la retirer de la liste de composants qui sont compilés. Pour ce faire, supprimez l'exigence de Blockly.requires de votre code :

// Core
goog.require('Blockly.requires');

À la place, ouvrez core/requires.js et copiez toutes les instructions requises dans votre code. Vous pouvez ensuite commenter celles dont vous n'avez pas besoin.

Notez que le compilateur Closure conserve les licences dans la sortie compilée. N'hésitez pas à supprimer les licences Apache de Google de ce fichier de sortie pour réduire davantage sa taille.

Le compilateur Closure propose de nombreuses fonctionnalités et options. Consultez sa documentation.