Kompilasi Lanjutan

Proses build reguler menggunakan compiler JavaScript online Google untuk mengurangi Blockly menjadi setengah lusin file dengan ukuran sekitar 720 kb (dizip 160 kb). Atau, seseorang dapat menggunakan compiler JavaScript offline Google dalam mode "kompilasi lanjutan" yang memiliki sejumlah keuntungan:

  • Ukuran Total Blockly dikurangi menjadi 300 kb (dizip 100 kb) karena guncangan pohon.
  • Waktu build menjadi lebih cepat dan tidak ada traffic jaringan karena eksekusi compiler lokal.
  • Kompilasi tanpa batas (compiler online dibatasi kapasitasnya).

Penyiapan

Untuk keperluan tutorial minimal ini, mulailah dengan membuat direktori baru di direktori utama Blockly.

Download Closure Compiler.

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

Pastikan Lingkungan Runtime Java Anda dapat menjalankan compiler dengan menjalankannya di command line:

java -jar closure-compiler.jar --version

Pelat Ketel

Pertama, buat file HTML yang menentukan toolbox Blockly minimal dan div untuk memasukkannya. 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/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>

Pastikan Anda mengedit jalur bahasa (../msg/js/en.js) sebagaimana diperlukan 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 bernama main.js di direktori Anda 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 secara bersamaan 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 Canggih

Untuk pengurangan ukuran yang lebih besar, Anda hanya dapat menyertakan komponen Blockly yang benar-benar digunakan 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 wajib ke dalam kode Anda. Anda dapat memberi komentar pada entri 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.

Closure Compiler memiliki banyak fitur dan opsi, lihat dokumentasi mereka.