Kompilasi Lanjutan

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

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

Penyiapan

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

Unduh Closure Compiler.

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

Pastikan bahwa Java Runtime Environment dapat menjalankan compiler dengan menjalankan perintah ini pada command line:

java -jar closure-compiler.jar --version

Pelat Pemanas

Pertama, buat file HTML yang mendefinisikan {i>toolbox<i} Blockly minimal dan {i>div<i} untuk menyuntikkannya. 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 untuk mengedit jalur bahasa (../msg/js/en.js) seperti yang diperlukan untuk jalur ke Blockly dan untuk bahasa yang Anda inginkan.

Kedua, buat file JavaScript yang memuat Blockly dan pesan apa pun yang diperlukan file atau definisi blok tertentu, lalu memasukkan Blockly ke dalam div yang disediakan. Untuk melakukannya, buat file dalam direktori 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 hanya dapat menyertakan komponen Blockly yang sebenarnya 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 yang diperlukan ke dalam kode Anda. Anda kemudian dapat mengomentari komentar yang tidak Anda butuhkan.

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

Closure Compiler memiliki banyak fitur dan opsi, periksalah dokumentasi.