Compilação avançada

O processo de build normal usa o compilador JavaScript on-line do Google para reduzir o Blockly a 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 compactado) devido ao tree shaking.
  • Tempos de build mais rápidos e sem tráfego de rede devido à execução do compilador local.
  • Compilações ilimitadas (o compilador on-line é limitado por taxa).

Configuração

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

Faça o download do Closure Compiler.

Baixe compiler.jar, renomeie para closure-compiler.jar e coloque no seu 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

Texto padrão

Primeiro, crie um arquivo HTML que defina uma caixa de ferramentas mínima do Blockly e um div em que injetar. Para fazer isso, crie um arquivo no seu diretório chamado index.html que contenha 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/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/en.js) conforme necessário para seu caminho para o Blockly e para o idioma desejado.

Em seguida, crie um arquivo JavaScript que carregue o Blockly e todos os arquivos de mensagens ou definições de blocos necessários. Depois, injete o Blockly no div fornecido. Para fazer isso, crie um arquivo no 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 juntos 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çada:

 npm run test:compile:advanced

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

Ainda mais avançado

Para reduzir ainda mais o tamanho, inclua apenas os componentes do Blockly que seu aplicativo realmente usa. Por exemplo, se o aplicativo não estiver configurado para ter uma lixeira, remova-a da lista de componentes compilados. Para isso, exclua a exigência de Blockly.requires do seu código:

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

Em vez disso, abra core/requires.js e copie todas as instruções de exigência no código. Depois, comente as que não forem necessárias.

O Closure Compiler preserva as licenças na saída compilada. Você pode remover as licenças Apache do Google desse arquivo de saída para reduzir ainda mais o tamanho.

O Closure Compiler tem muitos recursos e opções. Consulte a documentação.