O processo de compilação 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 de "compilação avançada", que tem uma série de vantagens:
- O tamanho total do Blockly foi reduzido para 300 KB (100 KB compactado) devido ao tree shaking.
- Tempos de compilação mais rápidos e nenhum tráfego de rede devido à execução do compilador local.
- Compilações ilimitadas (o compilador on-line tem limitação de taxa).
Configuração
Para os fins deste tutorial mínimo, comece criando um novo diretório no diretório raiz do Blockly.
Fazer o download do closure Compiler.
Faça o download do compiler.jar, renomeie-o como closure-compiler.jar e coloque-o no seu diretório.
Verifique se o Java Runtime Environment pode executar o compilador executando isto na linha de comando:
java -jar closure-compiler.jar --version
Chapa
Primeiro, crie um arquivo HTML que defina uma caixa de ferramentas mínima do Blockly e um div no qual injetá-lo. Para fazer isso, crie um arquivo no 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/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
o caminho para o Blockly e para o idioma desejado.
Depois, crie um arquivo JavaScript que carregue o Blockly e todos os arquivos de mensagem
necessários ou definições de bloco e injeta o Blockly no div fornecido.
Para fazer isso, crie um arquivo no seu diretório chamado main.js contendo
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);
Compilação
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çado:
npm run test:compile:advanced
Aponte um navegador para index.html para verificar se tudo funcionou.
Ainda mais avançado
Para reduções de tamanho ainda maiores, você pode incluir apenas os componentes do Blockly
que seu aplicativo realmente usa. Por exemplo, se o aplicativo não
estiver configurado para ter uma lixeira, você poderá removê-la da lista
de componentes compilados. Para fazer isso, exclua o requisito de
Blockly.requires do código:
// Core
goog.require('Blockly.requires');
No lugar dele, abra core/requires.js e copie todas as instruções exigidas no
código. Você pode comentar os que não precisa.
Observe que o closure Compiler preserva 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 dele.