Kompilasi lanjutan

Proses build reguler menggunakan compiler JavaScript online Google untuk mengurangi Blockly menjadi setengah lusin file dengan total sekitar 720 kb (160 kb yang di-zip). Atau, Anda dapat menggunakan compiler JavaScript offline Google dalam mode "kompilasi lanjutan" yang memiliki sejumlah keunggulan:

  • Total ukuran Blockly dikurangi menjadi 300 kb (100 kb terkompresi) karena penghapusan kode yang tidak digunakan.
  • Waktu build lebih cepat dan tidak ada traffic jaringan karena eksekusi compiler lokal.
  • Kompilasi tanpa batas (compiler online dibatasi kecepatan transfer datanya).

Penyiapan

Untuk tujuan tutorial minimal ini, mulailah dengan membuat direktori baru di direktori root Blockly.

Download Closure Compiler.

Download compiler.jar, ganti namanya menjadi closure-compiler.jar, dan tempatkan di direktori Anda.

Pastikan Java Runtime Environment Anda dapat menjalankan compiler dengan menjalankan perintah ini di command line:

java -jar closure-compiler.jar --version

Boiler Plate

Pertama, buat file HTML yang menentukan toolbox Blockly minimal dan div untuk menyisipkannya. Untuk melakukannya, buat file di direktori Anda bernama index.html yang berisi kode ini:

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

Pastikan untuk mengedit jalur bahasa (../msg/en.js) sesuai kebutuhan untuk jalur Anda ke Blockly dan untuk bahasa yang Anda inginkan.

Kedua, buat file JavaScript yang memuat Blockly dan file pesan atau definisi blok yang diperlukan, lalu masukkan Blockly ke dalam div yang disediakan. Untuk melakukannya, buat file di direktori Anda bernama main.js yang berisi kode ini:

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

Kompilasi main.js, Blockly, dan Closure Library bersama-sama dengan menjalankan Closure Compiler dari command line:

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

Atau dengan menggunakan skrip kompilasi lanjutan kami:

 npm run test:compile:advanced

Arahkan browser ke index.html untuk memverifikasi bahwa semuanya berfungsi.

Lebih Lanjut

Untuk pengurangan ukuran yang lebih besar, Anda dapat menyertakan hanya komponen Blockly yang benar-benar digunakan oleh aplikasi Anda. Misalnya, jika aplikasi Anda tidak dikonfigurasi untuk memiliki tempat sampah, Anda dapat menghapus tempat sampah dari daftar komponen yang dikompilasi. Untuk melakukannya, hapus persyaratan untuk Blockly.requires dari kode Anda:

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

Sebagai gantinya, buka core/requires.js dan salin semua pernyataan require ke dalam kode Anda. Kemudian, Anda dapat memberikan komentar pada yang tidak diperlukan.

Perhatikan bahwa Closure Compiler mempertahankan lisensi dalam output yang dikompilasi. Anda dapat menghapus lisensi Apache Google dari file output ini untuk mengurangi ukurannya lebih lanjut.

Closure Compiler memiliki banyak fitur dan opsi, jadi lihat dokumentasinya.