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 50 tệp với tổng dung lượng khoảng 720kb (160 kb (đã nén). Hoặc 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". Cách này có một số ưu điểm sau:
- Tổng kích thước Blockly giảm xuống còn 300kb (100kb nén) do rung cây.
- Thời gian xây dựng nhanh hơn và không có lưu lượng truy cập mạng do thực thi trình biên dịch cục bộ.
- Nội dung biên dịch không giới hạn (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 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 đó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 mã này trên dòng lệnh:
java -jar closure-compiler.jar --version
Tấm lò hơi
Trước tiên, hãy tạo một tệp HTML xác định hộp công cụ Blockly tối thiểu và một div để chèn công cụ đó. Để thực hiện việc này, hãy tạo một tệp trong thư mục có tên index.html chứa mã sau:
<!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 đối với đường dẫn đến Blockly và cho ngôn ngữ bạn muốn.
Tiếp theo, hãy tạo một tệp JavaScript tải Blockly và mọi tệp thông báo cần thiết hoặc định nghĩa khối, 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ủa bạn có tên là main.js chứa mã này:
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 đóng cùng nhau bằng cách chạy Trình biên dịch đóng thông qua 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 mọi thứ đã hoạt động.
Nâng cao hơn nữa
Để giảm kích thước nhiều hơn nữa, bạn chỉ có thể bao gồm các thành phần Blockly mà ứng dụng 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 như vậy, hãy xoá yêu cầu về Blockly.requires khỏi mã của bạn:
// Core
goog.require('Blockly.requires');
Vào vị trí đó, hãy mở core/requires.js và sao chép tất cả các câu lệnh yêu cầu vào
mã của bạn. Sau đó, các em có thể nhận xét những đề xuất không cần thiết.
Xin lưu ý rằng Trình biên dịch đóng lưu giữ các giấy phép trong dữ liệu đầu ra được biên dịch. Bạn có thể xoá giấy phép Apache của Google khỏi tệp đầu ra này để giảm kích thước hơn nữa.
Trình biên dịch đóng (Đóng) có rất nhiều tính năng và tuỳ chọn, hãy xem tài liệu của chúng.