ما الذي يجعل حزمة JS (bundle) تكبر، ولماذا يضرّ الحجم؟

Question

IT Interview Practice · Accepted Answer

إن **الحزمة (bundle)** هي شيفرة JavaScript التي تحزمها أداة البناء وترسلها إلى المتصفح. وهي تكبر أساسًا بسبب **التبعيات (dependencies)**، و**الشيفرة المكرَّرة**، و**إرسال شيفرة لا تحتاجها الصفحة بعد**.

## ما الذي يضخّمها

- **المكتبات الثقيلة** — يمكن لمكتبة تواريخ أو أيقونات واحدة أن تضيف مئات الكيلوبايتات. واستيراد كامل `lodash` لأجل دالة واحدة يجرّ الشيء بأكمله.
- **استيراد كل شيء** بدلًا مما تستخدمه:

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **غياب تقسيم الشيفرة (code splitting)** — يُحزَم التطبيق بأكمله (كل مسار، كل نافذة منبثقة) في ملف واحد يُحمَّل مسبقًا.
- **الحشوات (polyfills) والتبعيات المكرَّرة** — نسختان من الحزمة نفسها مُحزَّمتان مرتين.

## لماذا يضرّ الحجم

البايتات هي المشكلة الصغرى؛ أما **تحليل JS وتنفيذه** فهو المشكلة الكبرى. إذ يجب على المتصفح أن يُنزّل، ثم يحلّل ويترجم ويشغّل كل بايت على الخيط الرئيسي — وهذا أبطأ بكثير على هاتف متوسط منه على حاسوب محمول. فـ JS الثقيل يؤخّر التفاعلية ويزيد سوء **INP** و**LCP** مباشرةً.

## لماذا يهم

«فقط أضف المكتبة» هو ما يجعل التطبيقات تبطؤ بهدوء. يريد القائمون على المقابلات أن يروك تفكّر في *كلفة كل تبعية* وتلجأ إلى الاستيراد لكل دالة، وهزّ الشجرة (tree shaking)، وتقسيم الشيفرة قبل أن تتضخم الحزمة — خصوصًا أن هواتف مستخدميك أضعف بكثير من جهاز التطوير لديك.

ما الذي يضخّمها

لماذا يضرّ الحجم

لماذا يهم

أسئلة ذات صلة