Erweiterte Kompilierung

Beim regulären Build-Prozess wird der Online-JavaScript-Compiler von Google verwendet, um Blockly auf etwa sechs Dateien mit einer Gesamtgröße von etwa 720 KB (160 KB gezippt) zu reduzieren. Alternativ kann der Offline-JavaScript-Compiler von Google im Modus „Erweiterte Kompilierung“ verwendet werden, was eine Reihe von Vorteilen bietet:

  • Die Gesamtgröße von Blockly wurde durch Tree Shaking auf 300 KB (100 KB gezippt) reduziert.
  • Schnellere Build-Zeiten und kein Netzwerkverkehr durch lokale Compiler-Ausführung.
  • Unbegrenzte Kompilierungen (der Online-Compiler ist ratenbegrenzt).

Einrichtung

Erstellen Sie für dieses kurze Tutorial zuerst ein neues Verzeichnis im Blockly-Stammverzeichnis.

Laden Sie den Closure Compiler herunter.

Laden Sie compiler.jar herunter, benennen Sie es in closure-compiler.jar um und legen Sie es in Ihrem Verzeichnis ab.

Prüfen Sie, ob Ihre Java-Laufzeitumgebung den Compiler ausführen kann. Führen Sie dazu den folgenden Befehl in der Befehlszeile aus:

java -jar closure-compiler.jar --version

Boilerplate

Erstellen Sie zuerst eine HTML-Datei, in der eine minimale Blockly-Toolbox und ein div definiert werden, in das sie eingefügt werden kann. Erstellen Sie dazu in Ihrem Verzeichnis eine Datei mit dem Namen index.html, die diesen Code enthält:

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

Achten Sie darauf, den Sprachpfad (../msg/en.js) nach Bedarf für Ihren Pfad zu Blockly und für die gewünschte Sprache zu bearbeiten.

Erstellen Sie als Nächstes eine JavaScript-Datei, in der Blockly und alle erforderlichen Nachrichtendateien oder Blockdefinitionen geladen und dann in das bereitgestellte div eingefügt werden. Erstellen Sie dazu in Ihrem Verzeichnis eine Datei mit dem Namen main.js, die diesen Code enthält:

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

Kompilieren Sie main.js, Blockly und die Closure-Bibliothek zusammen, indem Sie den Closure Compiler über die Befehlszeile ausführen:

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

Oder Sie verwenden unser erweitertes Kompilierungsskript:

 npm run test:compile:advanced

Rufen Sie index.html in einem Browser auf, um zu prüfen, ob alles funktioniert hat.

Noch komplexer

Um die Größe noch weiter zu reduzieren, können Sie nur die Blockly-Komponenten einbinden, die Ihre Anwendung tatsächlich verwendet. Wenn Ihre Anwendung beispielsweise nicht für die Verwendung eines Papierkorbs konfiguriert ist, können Sie den Papierkorb aus der Liste der Komponenten entfernen, die kompiliert werden. Löschen Sie dazu die Anforderung für Blockly.requires aus Ihrem Code:

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

Öffnen Sie stattdessen core/requires.js und kopieren Sie alle „require“-Anweisungen in Ihren Code. Sie können dann die nicht benötigten auskommentieren.

Der Closure Compiler behält Lizenzen in der kompilierten Ausgabe bei. Sie können die Apache-Lizenzen von Google aus dieser Ausgabedatei entfernen, um die Größe weiter zu reduzieren.

Der Closure Compiler bietet viele Funktionen und Optionen. Weitere Informationen finden Sie in der Dokumentation.