Vue Academy · درس

تحسين عملية البناء

أنشئ إصدارات إنتاج محسّنة.

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

من التطوير إلى الإنتاج

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

تشغيل عملية البناء

ينشئ الأمر القياسي تطبيقك للإنتاج. يتولى Vite، وهي أدوات Vue 3 الافتراضية، تجميع كل شيء وحزمه وتحسينه.

npm run build

مخرجات البناء

تكتب عملية البناء الملفات المحسّنة داخل مجلد dist: ملف index.html، وحزم JavaScript وCSS بأسماء تتضمن تجزئات، وأصولك الثابتة. هذا هو المجلد الذي تنشره.

dist/
  index.html
  assets/
    index-a1b2c3.js
    index-d4e5f6.css

تصغير الملفات

يزيل تصغير الملفات المسافات البيضاء والتعليقات، ويقصّر أسماء المتغيرات لكي تُنزّل الملفات بسرعة أكبر. تُصغّر عمليات بناء الإنتاج ملفات JavaScript وCSS تلقائيًا.

Tree-shaking

يزيل Tree-shaking الشيفرة التي لا تستخدمها مطلقًا. إذا استوردت دالة واحدة من مكتبة، يتخلص bundler من بقية الشيفرة. استخدم الاستيرادات المُسمّاة لوحدات ES لكي تتيح لـ Tree-shaking العمل.

// only what you use is bundled
import { debounce } from "lodash-es"

تجزئة المحتوى

تتضمن أسماء ملفات مخرجات البناء تجزئة للمحتوى، مثل index-a1b2c3.js. عند تغيّر الشيفرة، تتغير التجزئة، لذلك يجلب المتصفح الملف الجديد بينما يحتفظ بالملفات التي لم تتغير في ذاكرة التخزين المؤقت لفترة طويلة.

تحليل حجم الحزمة

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

npm install -D rollup-plugin-visualizer

قراءة التحليل

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

متغيرات البيئة

يتيح Vite متغيرات البيئة التي تبدأ بالبادئة VITE_ من خلال import.meta.env. استخدمها لضبط عناوين API وأعلام الميزات لكل بيئة.

// .env.production
// VITE_API_URL=https://api.example.com

const apiUrl = import.meta.env.VITE_API_URL

البناء الخاص بكل بيئة

يحمّل Vite الملف .env.production أثناء تنفيذ npm run build، والملف .env.development أثناء تنفيذ npm run dev، بحيث تحصل كل بيئة تلقائيًا على الإعدادات المناسبة.

// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production  -> VITE_API_URL=https://api.example.com

معاينة البنية

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

npm run build
npm run preview

اختبار سريع

اختبر معرفتك بعملية البناء.

مراجعة

شغّل npm run build لإنشاء مجلد dist محسّن يحتوي على أصول مصغّرة ومُعالجة بواسطة Tree-shaking ومجزّأة وفق المحتوى. حلّل حجم الحزمة لتقليل الاعتمادات الثقيلة، واستخدم متغيرات البيئة VITE_ مع ملفات .env لضبط الإعدادات لكل بيئة. أجرِ معاينة قبل النشر. ستنشر بعد ذلك هذه البنية على منصة استضافة.

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

هل درس «تحسين عملية البناء» مجاني؟

نعم — نص درس «تحسين عملية البناء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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