الاستيراد الانتقائي لوحدات JS | واجهة Utilities API وتحسين الأداء في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

كما قللنا حجم CSS بالاستيراد الانتقائي، ينطبق المبدأ ذاته على جافاسكريبت! فبدلاً من تحميل ملف bootstrap.bundle.min.js الكامل الذي يضم جميع الإضافات الإحدى عشرة، صُممت إضافات بوتستراب 5 كوحدات قياسية مستقلة ES Modules بدون أي اعتماد على jQuery.

في بيئات البناء الحديثة مثل Vite أو Webpack، استورد فقط الإضافات التي تستخدمها واجهتك فعلاً مثل import Modal from 'bootstrap/js/dist/modal'؛ وعندما لا تستدعي القوائم المنسدلة أو التلميحات العائمة فلن تحتاج حتى إلى تضمين مكتبة التموضع @popperjs/core!

الصف 2 كود برمجي

HTML

<!-- ESM in Vite:
  import Modal from 'bootstrap/js/dist/modal';
-->
<button id="openBtn" type="button" class="btn btn-primary">
  Open Lean JS Modal
</button>
<div class="modal fade" id="leanModal" tabindex="-1"
  aria-hidden="true">...</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Selective ESM JS Imports الاستيراد الانتقائي لوحدات JS

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (واجهة Utilities API وتحسين الأداء في بوتستراب 5)