تجميع متقدّم

تستخدِم عملية الإنشاء العادية محوِّل JavaScript البرمجي على الإنترنت من Google لتقليل عدد الملفات التي يبلغ إجمالي حجمها 720 كيلوبايت (160 كيلوبايت) في حظر البيانات إلى نصف دستة ملف تقريبًا. بدلاً من ذلك، يمكن استخدام محوّل JavaScript البرمجي بلا إنترنت من Google في وضع "التجميع المتقدّم" الذي يتميّز بعدد من المزايا:

  • تم تقليل إجمالي حجم الحظر إلى 300 كيلوبايت (100 كيلوبايت مضغوط) بسبب اهتزاز الشجرة.
  • أوقات إنشاء أسرع وبدون حركة مرور بيانات الشبكة بسبب تنفيذ برنامج التحويل البرمجي المحلي.
  • مجموعات غير محدودة (برنامج التجميع على الإنترنت محدود السعر).

الإعداد

لأغراض هذا الدليل التوجيهي البسيط، ابدأ بإنشاء دليل جديد في الدليل الجذر فعلاً.

تنزيل Closure Compiler.

نزِّل الملف compiler.jar، وأعِد تسميته إلى closure-compiler.jar، وضَعه في الدليل.

تحقق من أن Java Runtime Environment (بيئة وقت تشغيل Java) يمكنها تشغيل المحول البرمجي من خلال تشغيل هذا في سطر الأوامر:

java -jar closure-compiler.jar --version

طبق الغلاية

أولاً، أنشئ ملف HTML يحدد أدنى مربع أدوات حظر وقسم 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/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>

احرِص على تعديل مسار اللغة (../msg/js/en.js) كما هو مطلوب في مسارك إلى Blockly وللغتك التي تريدها.

ثانيًا، أنشئ ملف JavaScript يحمِّل بشكل حظر أي ملفات رسائل ضرورية أو يحظر تعريفاتها، ثم يُدخِل حظرًا في قسم 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.requires من الرمز:

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

افتح core/requires.js وانسخ جميع العبارات المطلوبة والصقها في الرمز. يمكنك بعد ذلك إضافة التعليقات التي لا تحتاج إليها.

تجدُر الإشارة إلى أنّ Closure Compiler يحتفظ بالتراخيص في الإخراج المجمّع. يمكنك إزالة تراخيص Apache من Google من ملف الإخراج هذا لخفض الحجم أكثر.

يحتوي Closure Compiler على العديد من الميزات والخيارات، يمكنك الاطلاع على وثائق.