Beim regulären Build-Prozess wird der Online-JavaScript-Compiler von Google verwendet, um Blockly auf ein halbes Dutzend Dateien mit insgesamt ca. 720 KB (komprimiert 160 KB) zu reduzieren. Alternativ kann der Offline-JavaScript-Compiler von Google im Modus für die erweiterte Kompilierung verwendet werden, der eine Reihe von Vorteilen bietet:
- Gesamtgröße von Blockly auf 300 KB (100 KB komprimiert) aufgrund von Baumwackeln reduziert.
- Kürzere Build-Zeiten und kein Netzwerktraffic aufgrund lokaler Compiler-Ausführung.
- Unbegrenzte Kompilierungen (für den Online-Compiler gibt es Ratenbegrenzungen).
Einrichtung
Für diese Minimalanleitung beginnen Sie damit, ein neues Verzeichnis im Blockly-Stammverzeichnis zu erstellen.
Laden Sie Closure Compiler herunter.
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. Führen Sie dazu folgenden Befehl in der Befehlszeile aus:
java -jar closure-compiler.jar --version
Kesselplatte
Erstellen Sie zuerst eine HTML-Datei, die eine minimale Blockly-Toolbox und ein div-Element definiert, in das sie eingefügt werden soll. Dazu erstellen Sie in Ihrem Verzeichnis eine Datei namens 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/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>
Vergessen Sie nicht, den Sprachpfad (../msg/js/en.js) so zu bearbeiten, dass er für den Pfad zu Blockly und für die gewünschte Sprache erforderlich ist.
Erstellen Sie als Nächstes eine JavaScript-Datei, die Blockly und alle erforderlichen Nachrichtendateien oder Blockdefinitionen lädt und dann Blockly in das bereitgestellte div-Element einfügt. Erstellen Sie dazu eine Datei in Ihrem Verzeichnis 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 Closure Library 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
Richte einen Browser auf index.html, um zu prüfen, ob alles funktioniert hat.
Noch fortgeschrittener
Für noch größere Größenreduzierungen können Sie nur die Blockly-Komponenten einschließen, die Ihre Anwendung tatsächlich verwendet. Wenn Ihre Anwendung beispielsweise nicht für einen Papierkorb konfiguriert ist, können Sie diesen aus der Liste der kompilierten Komponenten entfernen. Löschen Sie dazu die Anforderung an Blockly.requires aus Ihrem Code:
// Core
goog.require('Blockly.requires');
Öffnen Sie stattdessen core/requires.js und kopieren Sie alle erforderlichen Anweisungen in Ihren Code. Sie können die nicht benötigten dann 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 verringern.
Der Closure-Compiler bietet viele Funktionen und Optionen. Weitere Informationen finden Sie in der entsprechenden Dokumentation.