شرح تجميع ملفات JavaScript

أنت تكتب تطبيقات React أو Angular باستخدام ملفات عديدة. تستخدم المكونات (components)، والخدمات (services)، والمكتبات (libraries).

تواجه المتصفحات صعوبة في التعامل مع الملفات الكثيرة. تحميل 200 ملف يعني 200 طلب شبكة (network request)، مما يجعل تطبيقك بطيئاً.

تقوم أدوات التجميع (Bundlers) بحل هذه المشكلة؛ فهي تأخذ الكود الخاص بك والواردات (imports) وتدمجها في ملف واحد أو بضعة ملفات صغيرة، مما يجعل عملية التحميل فعالة.

تقوم أدوات التجميع الحديثة بأكثر من مجرد دمج الملفات، فهي تؤدي المهام التالية:

  • التصغير (Minification): تقوم بإزالة المسافات والتعليقات، وتقصير أسماء المتغيرات لتوفير المساحة.
  • هز الشجرة (Tree shaking): تقوم بإزالة الكود الذي لا تستخدمه.
  • تقسيم الكود (Code splitting): تقوم بتقسيم الكود إلى أجزاء صغيرة، بحيث يقوم المستخدمون بتحميل ما يحتاجونه فقط.

الملفات الأصغر تؤدي إلى تطبيقات أسرع.

توجد أداتان رئيسيتان: Webpack و Vite.

تقوم Webpack بتجميع تطبيقك بالكامل قبل تقديمه. إنها قوية ومرنة، ولكن قد تبدو بطيئة في المشاريع الكبيرة لأنها تعيد تجميع كل شيء عند حدوث تغييرات.

تُعد Vite خياراً حديثاً؛ فهي تقدم الملفات مباشرة أثناء التطوير باستخدام ES modules الأصلية، وتقوم بتحديث الملف الذي تغيره فقط، مما يجعل التحديثات فورية.

مقارنة:

Webpack:

  • سرعة التطوير: أبطأ
  • الإعداد (Config): معقد
  • الأفضل لـ: المشاريع القديمة الكبيرة

Vite:

  • سرعة التطوير: سريعة
  • الإعداد (Config): بسيط
  • الأفضل لـ: المشاريع الحديثة الجديدة

استخدم Vite للمشاريع الجديدة.

تتبع كل أداة تجميع ثلاث خطوات:

  1. بناء مخطط التبعيات (dependency graph): تقوم أداة التجميع برسم خريطة لكيفية اتصال الملفات ببعضها البعض.
  2. تحويل الكود: تقوم بتحويل TypeScript أو JSX إلى JavaScript بسيط.
  3. إخراج الحزمة (bundle): تقوم بكتابة الملفات النهائية في مجلد مخصص للنشر (deployment).

حافظ على صغر حجم حزمتك باستخدام هذه النصائح:

  • التحميل الكسول (Lazy loading): قم بتحميل المكونات فقط عندما يحتاجها المستخدم.
  • الواردات المحددة (Specific imports): لا تقم باستيراد مكتبات كاملة، بل استورد الوظائف المحددة التي تستخدمها فقط.
  • تحليل الحزمة: استخدم أدوات لمعرفة الملفات التي تشغل أكبر مساحة.
  • استخدم نسخ الإنتاج (production builds): قم دائماً بنشر نسخ الإنتاج بدلاً من نسخ التطوير.

تجعل أدوات التجميع تطبيقاتك أسرع من خلال توفير ملفات أقل وأصغر حجماً.

المصدر: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p