Vue Academy · درس

التحميل الكسول وتقسيم الشيفرة

قسّم الحزم وحمّل المكوّنات والمسارات بكسل.

التحميل الكسول وتقسيم الشيفرة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

لماذا يهم حجم الحزمة؟

عندما يُرسَل كل شيء في ملف JavaScript واحد كبير، ينتظر المستخدمون وقتًا أطول حتى تظهر الشاشة الأولى. ويقسّم تقسيم الكود تطبيقك إلى أجزاء أصغر لا تُحمّل إلا عند الحاجة، مما يقلّل التنزيل الأولي ويسرّع بدء التشغيل.

الاستيراد الديناميكي import()

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

const module = await import("./heavyModule.js")
module.doSomething()

تقسيم الكود حسب المسار

تأتي أكبر فائدة من التقسيم حسب المسار، بحيث تحمّل كل صفحة كودها الخاص. في Vue Router، مرّر دالة تعيد استيرادًا ديناميكيًا بدلًا من استيراد المكوّن مباشرةً.

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

المسارات الثابتة مقابل الكسولة

قارن بين الأسلوبين. يضم الاستيراد الثابت المكوّن إلى الحزمة الرئيسية، بينما ينشئ الإصدار الكسول جزءًا مستقلًا لا يُجلَب إلا عند زيارة المسار.

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

لتحميل مكوّن بشكل كسول خارج الموجّه، غلّف استيرادًا ديناميكيًا باستخدام defineAsyncComponent. وتحمّله Vue عند عرضه للمرة الأولى فقط.

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

تسجيل المكوّنات غير المتزامنة

سجّل المكوّن غير المتزامن مثل أي مكوّن آخر، واستخدمه في القالب. وتتولى Vue عملية التحميل بشفافية.

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

حالتا التحميل والخطأ

يقبل الشكل المتقدم من defineAsyncComponent خيارات لعرض عنصر نائب أثناء التحميل وخطة بديلة عند فشل التحميل.

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

تحميل المكوّنات الثقيلة بشكل كسول

من المرشحين الجيدين للتحميل الكسول الأجزاء الثقيلة أو نادرة الاستخدام، مثل المخططات ومحررات النص المنسّق والخرائط ومربعات الحوار التي لا يفتحها إلا بعض المستخدمين.

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

التحميل المشروط باستخدام v-if

اربط مكوّنًا غير متزامن مع v-if كي لا يُجلَب الجزء الخاص به إلا عندما يشغّله المستخدم.

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

أجزاء مسمّاة لتصحيح الأخطاء

تمنح التعليقات السحرية بأسلوب Webpack الأجزاء أسماءً سهلة القراءة، مما يسهّل فحص تبويب الشبكة ومخرجات البناء.

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

قياس الأثر

بعد تقسيم الشيفرة، تحقّق من مخرجات عملية البناء أو علامة تبويب الشبكة في المتصفح. ينبغي أن ترى عدة ملفات أصغر للأجزاء بدلًا من حزمة واحدة كبيرة، كما ينبغي أن تنزّل عملية التحميل الأولية شيفرة أقل.

اختبار سريع

اختبر معرفتك بالتحميل الكسول.

مراجعة

يقلّل تقسيم الشيفرة باستخدام import() الديناميكي من حجم الحزمة الأولية. استخدم دالة تُعيد import للمسارات الكسولة، واستخدم defineAsyncComponent للمكوّنات عند الطلب، مع إمكانية إضافة حالتي التحميل والخطأ. حمّل الأجزاء الكبيرة أو نادرة الاستخدام بشكل كسول للحفاظ على سرعة بدء التشغيل. ستتعلّم بعد ذلك كيفية تخزين النتائج مؤقتًا وتجاوز العمل غير الضروري باستخدام الحفظ المؤقت.

الأسئلة الشائعة

هل درس «التحميل الكسول وتقسيم الشيفرة» مجاني؟

نعم — نص درس «التحميل الكسول وتقسيم الشيفرة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «التحميل الكسول وتقسيم الشيفرة»؟

قسّم الحزم وحمّل المكوّنات والمسارات بكسل. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «التحميل الكسول وتقسيم الشيفرة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التحميل الكسول وتقسيم الشيفرة
تقنيات الحفظ المؤقت
تحديد الاختناقات وإصلاحها

← العودة إلى Vue Academy