Vue Academy · درس

‏Tree-Shaking والاستيراد التلقائي

التصديرات المسماة لـ tree-shaking، والتكامل مع unplugin-vue-components، وإعداد resolver

الدرس 3 من 413 خطوة

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

ما هو اقتطاع الشجرة

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

التصديرات المسمّاة تُمكّنه

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

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

تجنّب كائن التجميع الافتراضي

يؤدي تصدير كائن واحد يحتوي على جميع المكوّنات إلى إجبار أدوات التجميع على الاحتفاظ بها كلها، حتى إذا كان التطبيق يستخدم مكوّنًا واحدًا فقط.

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

يستورد المستهلك ما يحتاج إليه

مع التصديرات المسمّاة، يستخرج المستهلك المكوّنات المستخدمة فقط، وتُحذف بقية المكوّنات من بنائه.

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

حقل sideEffects

تفترض أدوات التجميع أن الوحدات قد تتضمن آثارًا جانبية، ولذلك تحتفظ بها. ويخبرها ضبط "sideEffects": false في package.json بأن وحداتك نقية وآمنة للاقتطاع.

{
  "sideEffects": false
}

التصريح بالآثار الجانبية لـ CSS

إذا كانت حزمتك تتضمن عمليات استيراد CSS لا ينبغي حذفها، فأدرجها حتى يتم الاحتفاظ بهذه الملفات فقط.

{
  "sideEffects": ["**/*.css"]
}

الاستيراد التلقائي للمستهلكين

لتجنيب المستهلكين عمليات الاستيراد اليدوية، توفّر المكتبات محلِّلًا لـ unplugin-vue-components، يستورد المكوّنات المستخدمة في القوالب تلقائيًا.

npm install -D unplugin-vue-components

توفير محلِّل

المحلِّل دالة تُرجع، عند إعطائها اسم مكوّن مستخدم، مسار استيراده. أدرِج محلِّلًا من حزمتك.

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

إعدادات المستهلك

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

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

الاستيراد التلقائي واقتطاع الشجرة

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

تجنّب التسجيل العام

تؤدي المكتبة التي تسجّل جميع المكوّنات تلقائيًا عبر app.use إلى تعطيل اقتطاع الشجرة. فضّل التصديرات المسمّاة ومحلِّلًا اختياريًا حتى يختار المستهلكون المكوّنات التي يريدونها كلٌّ على حدة.

تحقق سريع

ما إعداد package.json الذي يخبر أدوات التجميع بأن وحداتك آمنة للاقتطاع من الشجرة؟

أجب عليها في الدرس التفاعلي

مراجعة

فعّل اقتطاع الشجرة باستخدام التصديرات المسمّاة (وليس كائن تجميع افتراضيًا مطلقًا)، واضبط "sideEffects": false (أو أدرج ملفات CSS). ولتسهيل الاستخدام، أدرِج محلِّلًا لـ unplugin-vue-components حتى يستورد المستهلكون المكوّنات المستخدمة تلقائيًا، مع تضمين ما يستخدمونه فقط، وتجنّب فرض التسجيل العام.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «‏Tree-Shaking والاستيراد التلقائي» مجاني؟

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

ماذا ستتعلم في «‏Tree-Shaking والاستيراد التلقائي»؟

التصديرات المسماة لـ tree-shaking، والتكامل مع unplugin-vue-components، وإعداد resolver تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏Tree-Shaking والاستيراد التلقائي»؟

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

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

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

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

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