การคอมไพล์ขั้นสูง

กระบวนการสร้างปกติจะใช้คอมไพเลอร์ JavaScript ออนไลน์ของ Google เพื่อลด Blockly ให้เหลือไฟล์ 6 ไฟล์ที่มีขนาดรวมประมาณ 720 KB (160 KB เมื่อบีบอัด) หรือจะใช้คอมไพเลอร์ JavaScript แบบออฟไลน์ของ Google ในโหมด "การคอมไพล์ขั้นสูง" ก็ได้ ซึ่งมีข้อดีหลายประการดังนี้

  • ลดขนาด Blockly ทั้งหมดเหลือ 300 KB (100 KB เมื่อซิป) เนื่องจากการกำจัดโค้ดที่ไม่จำเป็น
  • เวลาในการบิลด์เร็วขึ้นและไม่มีการรับส่งข้อมูลในเครือข่ายเนื่องจากการดำเนินการคอมไพเลอร์ในเครื่อง
  • การคอมไพล์ไม่จำกัด (คอมไพเลอร์ออนไลน์มีการจำกัดอัตรา)

ตั้งค่า

สำหรับวัตถุประสงค์ของบทแนะนำแบบย่อนี้ ให้เริ่มต้นด้วยการสร้างไดเรกทอรีใหม่ในไดเรกทอรีรากของ Blockly

ดาวน์โหลด Closure Compiler

ดาวน์โหลด compiler.jar เปลี่ยนชื่อเป็น closure-compiler.jar แล้ววางไว้ในไดเรกทอรี

ตรวจสอบว่า Java Runtime Environment เรียกใช้คอมไพเลอร์ได้โดยเรียกใช้คำสั่งนี้ ในบรรทัดคำสั่ง

java -jar closure-compiler.jar --version

Boiler Plate

ก่อนอื่นให้สร้างไฟล์ HTML ซึ่งกำหนดกล่องเครื่องมือ Blockly ขั้นต่ำและ div ที่จะแทรกกล่องเครื่องมือ โดยสร้างไฟล์ในไดเรกทอรีชื่อ index.html ที่มีโค้ดนี้

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

อย่าลืมแก้ไขเส้นทางภาษา (../msg/en.js) ตามที่จำเป็นสำหรับ เส้นทางไปยัง Blockly และสำหรับภาษาที่ต้องการ

ประการที่ 2 สร้างไฟล์ JavaScript ที่โหลด Blockly และไฟล์ข้อความหรือคำจำกัดความบล็อกที่จำเป็น จากนั้นแทรก Blockly ลงใน div ที่ระบุ โดยสร้างไฟล์ในไดเรกทอรีชื่อ main.js ที่มีโค้ดนี้

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

คอมไพล์ main.js, Blockly และ Closure Library ด้วยกันโดยเรียกใช้ Closure Compiler จากบรรทัดคำสั่ง

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

หรือโดยใช้สคริปต์การคอมไพล์ขั้นสูงของเรา

 npm run test:compile:advanced

ชี้เบราว์เซอร์ไปที่ index.html เพื่อยืนยันว่าทุกอย่างทำงานได้

ขั้นสูงยิ่งขึ้น

หากต้องการลดขนาดให้มากยิ่งขึ้น คุณสามารถรวมเฉพาะคอมโพเนนต์ Blockly ที่แอปพลิเคชันของคุณใช้จริง ตัวอย่างเช่น หากไม่ได้กำหนดค่าแอปพลิเคชันให้มีถังขยะ คุณก็นำถังขยะออกจากรายการคอมโพเนนต์ที่คอมไพล์ได้ โดยให้นำข้อกำหนดสำหรับ Blockly.requires ออกจากโค้ด

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

ให้เปิด core/requires.js แทน แล้วคัดลอกคำสั่งที่จำเป็นทั้งหมดลงในโค้ดของคุณ จากนั้นคุณก็แสดงความคิดเห็นในรายการที่ไม่ต้องการได้

โปรดทราบว่า Closure Compiler จะเก็บรักษาใบอนุญาตไว้ในเอาต์พุตที่คอมไพล์แล้ว คุณสามารถนำใบอนุญาต Apache ของ Google ออกจากไฟล์เอาต์พุตนี้เพื่อลดขนาดเพิ่มเติมได้

Closure Compiler มีฟีเจอร์และตัวเลือกมากมาย โปรดดูเอกสารประกอบ