Compilação avançada

O processo de compilação normal usa o compilador JavaScript on-line do Google para reduzir o Blockly para meia dúzia de arquivos, totalizando cerca de 720 KB (160 KB compactados). Como alternativa, é possível usar o compilador JavaScript off-line do Google no modo "compilação avançada", que tem várias vantagens:

  • O tamanho total do Blockly foi reduzido para 300 KB (100 KB compactados) devido ao recurso de desativação de elementos desnecessários.
  • Tempos de build mais rápidos e nenhum tráfego de rede devido à execução do compilador local.
  • Compilações ilimitadas (o compilador on-line é limitado por taxa).

Configuração

Para este tutorial mínimo, comece criando um novo diretório no diretório raiz do Blockly.

Faça o download do Closure Compiler.

Faça o download de compiler.jar, renomeie para closure-compiler.jar e coloque no diretório.

Verifique se o Java Runtime Environment pode executar o compilador executando este comando: na linha de comando:

java -jar closure-compiler.jar --version

Panela elétrica

Primeiro, crie um arquivo HTML que defina uma caixa de ferramentas mínima do Blockly e um div para injetá-la. Para isso, crie um arquivo em seu diretório chamado index.html que contém 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>

Edite o caminho do idioma (../msg/js/en.js) conforme necessário para seu caminho para o Blockly e para o idioma desejado.

Depois, crie um arquivo JavaScript que carregue o Blockly e as mensagens necessárias ou definições de bloco, injeta o Blockly no div fornecido. Para isso, crie um arquivo em seu diretório chamado main.js que contenha 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);

Compilar

Compile main.js, Blockly e Closure Library em conjunto executando o Closure Compiler na linha de 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

Ou usando nosso script de compilação avançado:

 npm run test:compile:advanced

Aponte o navegador para index.html e verifique se tudo funcionou.

Ainda mais avançado

Para reduções de tamanho ainda maiores, você pode incluir apenas os componentes Blockly que seu aplicativo usa. Por exemplo, se o aplicativo não estiver tenha uma lixeira, então será possível removê-la da lista de componentes compilados. Para isso, exclua o requisito de Blockly.requires do seu código:

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

No lugar dele, abra core/requires.js e copie todas as instruções de require no código. Você pode comentar as que não forem necessárias.

Observe que o Closure Compiler preserva licenças na saída compilada. Sinta-se à vontade para remover as licenças do Apache do Google desse arquivo de saída para reduzir o o tamanho ainda mais.

O Closure Compiler tem muitos recursos e opções, confira documentação.