Biên dịch nâng cao

Quy trình xây dựng 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 nửa tá tệp có tổng kích thước khoảng 720kb (tệp nén 160kb). Ngoài ra, bạn có thể sử dụng trình biên dịch JavaScript ngoại tuyến của Google trong tính năng "biên dịch nâng cao" chế độ nào có một số ưu điểm:

  • Tổng kích thước Blockly giảm xuống còn 300kb (được nén 100kb) do rung cây.
  • 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ụ cho 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 đóng gói 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ủa bạn 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

Mã nguyên mẫu

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 để đưa vào đó. Để thực hiện việc này, hãy tạo một tệp trong thư mục của bạn có tên index.html chứa mã này:

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

Hãy nhớ chỉnh sửa đường dẫn ngôn ngữ (../msg/js/en.js) theo yêu cầu cho lộ trình đến Blockly và 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 được 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à Thư viện Closure cùng nhau bằng cách chạy Trình biên dịch Closure 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ỏ một trình duyệt vào index.html để xác minh rằng mọi thứ đều hoạt động.

Nâng cao hơn nữa

Để giảm kích thước hơn nữa, bạn chỉ có thể thêm 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. Để thực hiện việc này, hãy xoá yêu cầu đối với Blockly.requires từ mã của bạn:

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

Hãy mở core/requires.js rồi sao chép tất cả câu lệnh yêu cầu vào đó mã của bạn. Sau đó, bạn có thể nhận xét về những thẻ mình không cần.

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

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