تجمع الأصول جزء أساسي من تطوير الويب الحديث ، والمساعدة في تحسين وإدارة CSS ، JavaScript ، وغيرها من الموارد. لسنوات ، قام Laravel Mix بسيطرة هذه العملية ، ولكن مع تطور أدوات JavaScript ، انتقل Laravel إلى Vite كإعداد افتراضي في Laravel 11.

فلماذا جعل Laravel هذا المفتاح؟

---

الأداء والسرعة

يركز Vite على شيئين رئيسيين: سرعة التطوير وأداء الإنتاج. إذا كنت قد سئمت من الانتظار في البناء ، فستشعر ملاحظات Vite الفورية وكأنها أنفاس من الهواء النقي. باستخدام استبدال الوحدة النمطية الساخنة (HMR) ، يقدم خادم تطوير Vite التغييرات في الوقت الفعلي ، حتى تتمكن من رؤية التحديثات على الفور ، دون تحديث صفحة كاملة. تخلق هذه التغذية المرتدة الفورية تجربة تطوير أسرع وأكثر إمتاعًا.

يستخدم Laravel Mix هذا النهج ، ويتطلب وقت تجميع أولي كبير ، مما يؤدي إلى تأخير قبل أن يكون الخادم جاهزًا.

هذا النهج القائم على ESM أسرع بكثير في التطوير ، لأنه يتجنب عملية التجميع الكاملة. يستخدم Vite هذا النهج ، مما يسمح للمطورين برؤية التغييرات على الفور دون انتظار حزمة كاملة.

(الصور من الوثائق الرسمية لـ Vite)

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

دعم JavaScript الحديث

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

تجربة المطور المحسنة

عملية تكوين Vite واضحة بشكل منعش. على عكس WebPack ، حيث يمكن أن تصبح التكوينات كثيفة ومعقدة ، فإن ملف Vite vite.config.js سهل القراءة والتخصيص ، حتى لو لم يكن لديك تجربة مكثفة.

Plus ، تم تصميم Vite للعمل بسلاسة مع الأطر الشهيرة مثل Vue و React. نظرًا لأن هذه الأطر تستفيد أيضًا من HMR من Vite وبيئة التطوير المحسّنة ، يمكنك العمل بكفاءة أكبر في مشاريع Laravel الواجهة الأمامية.

الاستغناء عن المستقبل واعتماد المجتمع

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

قرار Laravel بتبني Vite يظهر توافقًا واضحًا مع المعايير الحديثة ، حيث وضع مشاريعك في Laravel للبقاء متوافقة مع أحدث التقنيات الأمامية.

تكامل Laravel

المكوّن الإضافي لـ LARAVEL يتضمن وظائف مساعدة مفيدة مثل @فيت لقوالب الشفرة ، والتعامل تلقائيًا مع إصدار إصدار الأصول واختراق ذاكرة التخزين المؤقت. باستخدام @فقط ("الموارد/CSS/APP.CSS") ، يمكنك ربط ملف CSS الخاص بك دون القلق بشأن مشكلات ذاكرة التخزين المؤقت التي لا معنى لها.

إليك كيف يمكنك إعداد vite.config.js لمشروع Laravel Vue:

استيراد {defereconfig} من 'vite' ؛ استيراد vue من '@vitejs/plugin-vue' ؛ تصدير الافتراضي DefereConfig ({ الإضافات: [Vue ()] ، }) ؛

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

ثم في النصل:

@فيت ('الموارد/css/app.css')

مرحبًا ، vite!

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

ومع الدعم الرسمي والوثائق الرسمية لـ Laravel ركزوا الآن على Vite ، ستجد إرشادات وموارد متسقة لمساعدتك في الحصول على أقصى استفادة من هذه الأداة.

---

باختصار ، يجلب Vite السرعة والبساطة والسمات الجاهزة في المستقبل التي تحتاجها مشاريع Laravel الحديثة. من خلال جعل Vite الافتراضي في Laravel 11 ، تقوم Laravel بتمكين المطورين من بناء تطبيقات أسرع وأصغر وأكثر كفاءة ، خاصة مع استمرار تطور معايير تطوير JavaScript ومواقع الويب. الغوص في الوثائق الرسمية لـ Laravel لمزيد من الأفكار وابدأ مع Vite اليوم!