Kompilacja zaawansowana

Standardowy proces kompilacji wykorzystuje internetowy kompilator JavaScriptu Google, aby zredukować Blockly do pół tuzina plików o łącznym rozmiarze około 720 KB (160 KB po spakowaniu). Możesz też użyć kompilatora JavaScriptu offline Google w trybie „kompilacja zaawansowana”, który ma wiele zalet:

  • Dzięki eliminacji nieużywanego kodu łączny rozmiar Blockly został zmniejszony do 300 KB (100 KB po spakowaniu).
  • Krótszy czas kompilacji i brak ruchu sieciowego dzięki lokalnemu wykonywaniu kompilatora.
  • nieograniczona liczba kompilacji (kompilator online ma ograniczenie liczby żądań);

Konfiguracja

Na potrzeby tego 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 środowisko Java Runtime Environment może uruchomić kompilator. W tym celu uruchom w wierszu poleceń to polecenie:

java -jar closure-compiler.jar --version

Boiler Plate

Najpierw utwórz plik HTML, który definiuje minimalny przybornik Blockly i div, do którego można go wstawić. Aby to zrobić, utwórz w katalogu plik o nazwie index.html, który zawiera ten kod:

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

W razie potrzeby zmień ścieżkę języka (../msg/en.js), aby dopasować ją do ścieżki do Blockly i wybranego języka.

Po drugie, utwórz plik JavaScript, który wczytuje Blockly i wszystkie niezbędne pliki z komunikatami lub definicjami bloków, a następnie wstawia Blockly do podanego elementu div. Aby to zrobić, utwórz w katalogu plik o nazwie main.js, który zawiera 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 main.js, Blockly i Closure Library, uruchamiając kompilator Closure z 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ż użyć naszego zaawansowanego skryptu kompilacji:

 npm run test:compile:advanced

Otwórz przeglądarkę i wpisz adres index.html, aby sprawdzić, czy wszystko działa.

Jeszcze bardziej zaawansowane

Aby jeszcze bardziej zmniejszyć rozmiar, możesz uwzględnić tylko te komponenty Blockly, których Twoja aplikacja rzeczywiście używa. Jeśli na przykład aplikacja nie jest skonfigurowana tak, aby mieć kosz, możesz go usunąć z listy komponentów, które są w niej kompilowane. Aby to zrobić, usuń z kodu wymaganie dotyczące Blockly.requires:

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

Zamiast tego otwórz plik core/requires.js i skopiuj wszystkie wymagane instrukcje do kodu. Możesz wtedy wykomentować te, których nie potrzebujesz.

Pamiętaj, że kompilator Closure Compiler zachowuje licencje w skompilowanych danych wyjściowych. Możesz usunąć z tego pliku wyjściowego licencje Apache Google, aby jeszcze bardziej zmniejszyć jego rozmiar.

Kompilator Closure ma wiele funkcji i opcji. Zapoznaj się z jego dokumentacją.