Raccolta di contenuti avanzata

La normale procedura di compilazione utilizza il compilatore JavaScript online di Google per ridurre Blockly a una mezza dozzina di file per un totale di circa 720 KB (160 KB compressi). In alternativa, è possibile utilizzare il compilatore JavaScript offline di Google in modalità "compilazione avanzata", che presenta una serie di vantaggi:

  • Le dimensioni totali di Blockly sono state ridotte a 300 kB (100 kB compressi) grazie all'eliminazione del codice inutilizzato.
  • Tempi di compilazione più rapidi e nessun traffico di rete grazie all'esecuzione del compilatore locale.
  • Compilazioni illimitate (il compilatore online è limitato in base alla frequenza).

Configurazione

Ai fini di questo tutorial di base, inizia creando una nuova directory nella directory principale di Blockly.

Scarica Closure Compiler.

Scarica compiler.jar, rinominalo in closure-compiler.jar e inseriscilo nella directory.

Verifica che Java Runtime Environment possa eseguire il compilatore eseguendo questo comando nella riga di comando:

java -jar closure-compiler.jar --version

Boiler Plate

Innanzitutto, crea un file HTML che definisca una toolbox Blockly minimale e un div in cui inserirla. A questo scopo, crea un file nella tua directory denominato index.html che contenga questo codice:

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

Assicurati di modificare il percorso della lingua (../msg/en.js) in base alle esigenze per il percorso di Blockly e per la lingua che preferisci.

In secondo luogo, crea un file JavaScript che carichi Blockly e tutti i file di messaggi o le definizioni di blocchi necessari, quindi inserisci Blockly nel div fornito. A questo scopo, crea un file nella directory denominato main.js che contenga questo codice:

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

Compila

Compila main.js, Blockly e Closure Library insieme eseguendo il compilatore Closure dalla riga di comando:

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

oppure utilizzando il nostro script di compilazione avanzata:

 npm run test:compile:advanced

Punta un browser su index.html per verificare che tutto funzioni.

Ancora più avanzato

Per una riduzione ancora maggiore delle dimensioni, puoi includere solo i componenti Blockly che la tua applicazione utilizza effettivamente. Ad esempio, se la tua applicazione non è configurata per avere un cestino, puoi rimuoverlo dall'elenco dei componenti compilati. Per farlo, elimina il requisito per Blockly.requires dal tuo codice:

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

Al suo posto, apri core/requires.js e copia tutte le istruzioni require nel tuo codice. Puoi quindi commentare quelli che non ti servono.

Tieni presente che Closure Compiler conserva le licenze nell'output compilato. Se vuoi ridurre ulteriormente le dimensioni, puoi rimuovere le licenze Apache di Google da questo file di output.

Closure Compiler offre molte funzionalità e opzioni, consulta la relativa documentazione.