Biên dịch nâng cao

Quy trình tạo thông thường sử dụng trình biên dịch JavaScript trực tuyến của Google để giảm Blockly xuống còn khoảng 6 tệp với tổng kích thước khoảng 720 KB (160 KB khi nén). Ngoài ra, bạn có thể sử dụng trình biên dịch JavaScript ngoại tuyến của Google ở chế độ "biên dịch nâng cao" với một số ưu điểm:

  • Tổng kích thước Blockly giảm xuống còn 300 KB (100 KB khi nén) do tính năng loại bỏ mã không dùng đến.
  • Thời gian tạo bản dựng nhanh hơn và không có lưu lượng truy cập mạng do quá trình thực thi trình biên dịch cục bộ.
  • Không giới hạn số lần biên dịch (trình biên dịch trực tuyến bị giới hạn tốc độ).

Thiết lập

Để phục vụ mục đích của hướng dẫn tối giản này, hãy bắt đầu bằng cách tạo một thư mục mới trong thư mục gốc Blockly.

Tải Trình biên dịch Closure xuống.

Tải compiler.jar xuống, đổi tên thành closure-compiler.jar rồi đặt vào thư mục của bạn.

Xác minh rằng Môi trường chạy Java có thể chạy trình biên dịch bằng cách chạy lệnh này trên dòng lệnh:

java -jar closure-compiler.jar --version

Boiler Plate

Trước tiên, hãy tạo một tệp HTML xác định một hộp công cụ Blockly tối thiểu và một div để chèn hộp công cụ đó. Để làm vậy, hãy tạo một tệp trong thư mục có tên là index.html chứa đoạn mã sau:

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

Hãy nhớ chỉnh sửa đường dẫn ngôn ngữ (../msg/en.js) theo yêu cầu cho đường dẫn đến Blockly và cho ngôn ngữ bạn muốn.

Thứ hai, hãy tạo một tệp JavaScript tải Blockly và mọi tệp thông báo hoặc định nghĩa khối cần thiết, sau đó chèn Blockly vào div đã cung cấp. Để thực hiện việc này, hãy tạo một tệp trong thư mục có tên là main.js chứa mã sau:

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);

Biên dịch

Biên dịch main.js, Blockly và Closure Library cùng nhau bằng cách chạy Closure Compiler từ dòng lệnh:

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

Hoặc bằng cách sử dụng tập lệnh biên dịch nâng cao của chúng tôi:

 npm run test:compile:advanced

Trỏ trình duyệt đến index.html để xác minh mọi thứ đều hoạt động.

Thậm chí còn nâng cao hơn

Để giảm kích thước hơn nữa, bạn chỉ có thể đưa các thành phần Blockly mà ứng dụng của bạn thực sự sử dụng. Ví dụ: nếu ứng dụng của bạn không được định cấu hình để có thùng rác, thì bạn có thể xoá thùng rác khỏi danh sách các thành phần được biên dịch. Để làm vậy, hãy xoá yêu cầu đối với Blockly.requires khỏi mã của bạn:

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

Thay vào đó, hãy mở core/requires.js rồi sao chép tất cả các câu lệnh bắt buộc vào mã của bạn. Sau đó, bạn có thể bình luận về những mục mà bạn không cần.

Xin lưu ý rằng Trình biên dịch Closure sẽ giữ lại giấy phép trong đầu ra đã biên dịch. Bạn có thể xoá các giấy phép Apache của Google khỏi tệp đầu ra này để giảm thêm kích thước.

Trình biên dịch Closure có rất nhiều tính năng và lựa chọn, hãy xem tài liệu của trình biên dịch này.