Zwykły proces kompilacji korzysta z dostępnego przez Google kompilatora JavaScriptu, aby zmniejszyć rozmiar Blockly do pół tuzina plików, łącznie o około 720 KB (160 KB w formacie skompresowanym). Innym rozwiązaniem jest użycie kompilatora offline Google JavaScript w trybie „kompilacji zaawansowanej”, który ma kilka zalet:
- Całkowity rozmiar Blockly zmniejszony do 300 KB (100 KB w formacie skompresowanym) z powodu wstrząsania drzewa.
- Krótszy czas kompilacji i brak ruchu sieciowego dzięki wykonaniu lokalnego kompilatora.
- Nieograniczone kompilacje (kompilator online nie ma ograniczeń przesyłania).
Konfiguracja
Na potrzeby tego minimalnego samouczka zacznij od utworzenia nowego katalogu w katalogu głównym Blockly.
Pobierz kompilator Closure Compiler.
Pobierz plik compiler.jar, zmień jego nazwę na closure-compiler.jar i umieść go w katalogu.
Sprawdź, czy Twoje środowisko wykonawcze Java może uruchomić kompilator, uruchamiając to w wierszu poleceń:
java -jar closure-compiler.jar --version
Płyta podgrzewacza
Najpierw utwórz plik HTML definiujący minimalistyczne zestaw narzędzi Blockly i element div, w którym chcesz go wstrzyknąć. Aby to zrobić, w katalogu o nazwie index.html utwórz plik zawierający ten kod:
<!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>
Pamiętaj, aby zmienić ścieżkę języka (../msg/js/en.js) zgodnie z wymaganiami ścieżki do Blockly i wybranym przez Ciebie językiem.
Następnie utwórz plik JavaScript, który wczytuje Blockly, wszystkie niezbędne pliki komunikatów i definicje bloków, a następnie wstrzykuje Blockly do podanego elementu div. Aby to zrobić, utwórz w katalogu o nazwie main.js plik zawierający ten kod:
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);
Compile
Skompiluj jednocześnie biblioteki main.js, Blockly i Closure Library, uruchamiając kompilator Closure Compiler z poziomu wiersza poleceń:
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
Możesz też skorzystać z naszego zaawansowanego skryptu kompilacji:
npm run test:compile:advanced
Otwórz w przeglądarce stronę index.html, aby sprawdzić, czy wszystko działa.
Jeszcze bardziej zaawansowane
Aby jeszcze bardziej zmniejszyć rozmiar, możesz użyć tylko tych komponentów Blockly, których aplikacja używa. Jeśli na przykład w aplikacji nie skonfigurowano kosza, możesz go usunąć z listy skompilowanych komponentów. Aby to zrobić, usuń z kodu wymaganie dotyczące Blockly.requires:
// Core
goog.require('Blockly.requires');
Zamiast niego otwórz core/requires.js i skopiuj do kodu wszystkie wymagane instrukcje. Te, których nie potrzebujesz, możesz dodać do komentarza.
Pamiętaj, że Closure Compiler zachowuje licencje w skompilowanych wynikach. Możesz usunąć licencje Apache Google z tego pliku wyjściowego, aby jeszcze bardziej zmniejszyć rozmiar.
Closure Compiler ma wiele funkcji i opcji – więcej informacji znajdziesz w dokumentacji.