Compilation avancée

Le processus de compilation habituel 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 :

  • La taille totale de Blockly a été réduite à 300 Ko (100 Ko compressé) grâce à l'élimination du code inutilisé.
  • Temps de compilation plus rapides et pas de trafic réseau grâce à l'exécution du compilateur local.
  • Compilations illimitées (le compilateur en ligne est limité en termes de débit).

Configuration

Pour les besoins de ce tutoriel minimal, commencez par créer un répertoire dans le répertoire racine de 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 la commande suivante sur 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 un div dans lequel l'injecter. Pour ce faire, créez un fichier dans votre répertoire appelé index.html 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/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 d'accès à la langue (../msg/en.js) selon vos besoins pour votre chemin d'accès à Blockly et pour la langue souhaitée.

Ensuite, créez un fichier JavaScript qui charge Blockly et tous les fichiers de messages ou définitions de blocs nécessaires, puis injectez Blockly dans le div fourni. Pour ce faire, créez un fichier nommé main.js dans votre répertoire et ajoutez-y 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 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

Ou en utilisant notre script de compilation avancée :

 npm run test:compile:advanced

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

Encore plus avancé

Pour réduire encore davantage la taille, vous pouvez n'inclure que les composants Blockly que votre application utilise réellement. Par exemple, si votre application n'est pas configurée pour avoir une corbeille, vous pouvez la supprimer de la liste des composants compilés. Pour ce faire, supprimez l'exigence pour Blockly.requires de votre code :

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

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

Notez que Closure Compiler conserve les licences dans le résultat compilé. 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. N'hésitez pas à consulter sa documentation.