كيف تمكّن المكونات غير المتزامنة من التحميل الكسول؟

Question

Accepted Answer

**مكونات غير متزامنة** تتيح لك تحميل كود المكون **فقط عند الحاجة الفعلية إليه**، وتقسيمه إلى حزمة منفصلة (chunk) يتم جلبها حسب الطلب. هذا يقلل من حجم JavaScript الأولي الذي ينزله المستخدم.

## تعريف مكون غير متزامن

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

دالة `import()` الديناميكية تخبر bundler (Vite/webpack) بتقسيم `HeavyChart.vue` إلى ملف خاص به، يتم تحميله بشكل كسول عند استخدام المكون للمرة الأولى — وليس كجزء من الحزمة الرئيسية.

## لماذا هذا مهم لأداء التطبيق

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

المكونات الكبيرة والنادرة الاستخدام (محررات النصوص الغنية، الرسوم البيانية، النوافذ المنبثقة، لوحات المسؤول) لا تحتاج إلى أن تكون في التنزيل الأولي. تحميلها بشكل كسول يحسّن من وقت التحميل الأولي و Core Web Vitals.

## التعامل مع حالات التحميل والأخطاء

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

هذا الشكل المتقدم يتيح لك عرض رمز تحميل أثناء الجلب وواجهة احتياطية عند الفشل — مهم جداً لأن التحميل الكسول يقدّم تأخير شبكي (عادة قصير).

## الاستخدام الشائع: تقسيم الكود على مستوى المسارات

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

التحميل الكسول لمكونات المسارات هو الاستخدام الأكثر شيوعاً وتأثيراً — كود كل صفحة يتم تحميله فقط عند انتقال المستخدم إليها.

## لماذا هذا مهم

مكونات غير متزامنة هي آلية Vue لـ **تقسيم الكود** — التقنية الأساسية للحفاظ على الحزم الأولية صغيرة مع نمو التطبيق.

بتحميل المكونات الثقيلة أو الخاصة بمسار معين عند الحاجة (مع واجهة تحميل/خطأ اختيارية)، تقلل من حجم JavaScript الذي ينزله المستخدمون في البداية، مما يسرع التحميل الأول.

إنها عملية تحسين أداء قياسية وعالية التأثير، خاصة عند تطبيقها على المسارات.