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 de nombreux avantages:
- Taille totale de Blockly réduite à 300 Ko (100 Ko compressés) en raison du tremblement des arbres.
- Compilation plus rapide et 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).
Prérequis
Pour les besoins de ce tutoriel minimal, commencez par créer un nouveau répertoire dans le répertoire racine Blockly.
Téléchargez le compilateur de fermeture.
Téléchargez le fichier 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 dans la ligne de commande:
java -jar closure-compiler.jar --version
Plaque de cuisson
Commencez par créer un fichier HTML qui définit une boîte à outils Blockly minimale, ainsi qu'un élément div dans lequel l'injecter. Pour ce faire, créez dans votre répertoire un fichier nommé 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/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 d'accès de la langue (../msg/js/en.js) comme requis pour votre chemin d'accès à Blockly et pour la langue de votre choix.
Ensuite, créez un fichier JavaScript qui charge Blockly et tous les fichiers de message ou définitions de bloc nécessaires, puis injecte Blockly dans l'élément div fourni. Pour ce faire, créez dans votre répertoire un fichier nommé 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 Closure Library en exécutant le compilateur de fermeture à 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é.
Toujours 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 n'est pas configurée pour utiliser une corbeille, vous pouvez la supprimer de la liste des composants dans lesquels elle est compilée. Pour ce faire, supprimez de votre code l'exigence de Blockly.requires:
// Core
goog.require('Blockly.requires');
À la place, ouvrez core/requires.js et copiez toutes les instructions requises dans votre code. Vous pouvez ensuite mettre en commentaire ceux dont vous n'avez pas besoin.
Notez que le compilateur de fermeture 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 la taille.
Closure Compiler propose de nombreuses fonctionnalités et options. Consultez la documentation correspondante.