Erweiterte Zusammenstellung

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

  • Die Blockly-Gesamtgröße wurde durch Tree Shaking auf 300 KB (100 KB komprimiert) reduziert.
  • Schnellere Build-Dauer und kein Netzwerktraffic durch lokale Compilerausführung.
  • Unbegrenzte Zusammenstellungen (für den Online-Compiler gilt eine Ratenbegrenzung).

Einrichtung

Erstellen Sie für diese minimale Anleitung zuerst ein neues Verzeichnis im Blockly-Stammverzeichnis.

Closure Compiler herunterladen.

Laden Sie compiler.jar herunter, benennen Sie die Datei in closure-compiler.jar um und speichern Sie sie in Ihrem Verzeichnis.

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

java -jar closure-compiler.jar --version

Boilerplate

Erstellen Sie zuerst eine HTML-Datei, in der eine minimale Blockly-Toolbox und ein Div-Element definiert werden, in das sie eingefügt werden soll. Erstellen Sie dazu in Ihrem Verzeichnis eine Datei namens index.html mit diesem Code:

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

Ändern Sie den Sprachpfad (../msg/js/en.js) entsprechend den den Weg zu Blockly und Ihre gewünschte Sprache zu finden.

Erstellen Sie dann eine JavaScript-Datei, die Blockly und alle erforderlichen Mitteilungen lädt oder Blockdefinitionen. Dann wird Blockly in das angegebene div-Element eingefügt. Erstellen Sie dazu eine Datei in Ihrem Verzeichnis namens main.js, die diesen Code:

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 Closure Library mithilfe des folgenden Befehls: Closure Compiler über die Befehlszeile:

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.

Noch erweiterter

Wenn Sie die Größe noch weiter reduzieren möchten, können Sie nur die Blockly-Komponenten einschließen, die Ihre Anwendung tatsächlich verwendet. Wenn Ihre Anwendung beispielsweise nicht mit einem Papierkorb konfiguriert haben, können Sie den Papierkorb aus der Liste entfernen. die kompiliert wurden. Löschen Sie dazu die Anforderung für Blockly.requires von deinem Code:

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

Öffnen Sie stattdessen core/requires.js und kopieren Sie alle erforderlichen Anweisungen in Ihren Code. Nicht benötigte Inhalte können Sie dann auskommentieren.

Der Closure Compiler behält Lizenzen in der kompilierten Ausgabe bei. Sie können gerne die Apache-Lizenzen von Google aus dieser Ausgabedatei entfernen, um den weiter vergrößern.

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