ما هو Vite؟ وما الجديد بشأن تحزيم الأصول في لارافيل؟ ما الذي يعنيه التخلي عن webpack و laravel mix والانتقال الى Vite؟

webpack في الاصل هو مجمع ملفات او بشكل ادق مجمع وحدات module bundler تقوم بتجميع عدد من ملفات الجافاسكربت، الـ HTML والcss لتجعلها في ملف واحد، وبهذا المنطق تتيح الكثير من الميزات الأخرى على سبيل:

• امكانية تقسيم الشيفرات وتجزئتها.
• استخدام المحملات لتحميل وتفسير انواع معينة من الملفات مثل sass.
• فصل بيئة التطوير عن بيئة الانتاج.

وغيرها الكثير..

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

ويتم تقديم laravel-mix كآداة توفر واجهة تطبيقات برمجية للعمل بـ webpack بشكل أكثر فعالية في تطبيقات لارافيل لذات الغرض السابق.

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

• dependency modules أو وحدات التبعية، وهي الوحدات التي يتم تحميلها وطلبها من node_modules. يتم ذلك عن طريق مجمع يدعى esbuild هو مكتوب بلغة Go ويعد اسرع بـ 10 الى 100 مرة من ويب باك.
• application modules او وحدات التطبيق، وهي الوحدات التي تشتغل عليها او بالأحرى هي ملفات تطبيقك.

ويبباك تقوم بتجميع كل ما ينتمي لكليهما واخراجهما في ملف واحد كل مرة تطلبه. يدعى هذا بـ bundler-based workflow او سير العمل القائم على التحزيم.

Vite تقوم فقط بتجميع وحدات التبعية الخاصة بك، في حين ان وحدات التطبيق تقدم فقط حينما يتم طلبها او في لحظة ما تكون مستعملة من طرف صفحة ما او مكون ما. تسمي Vite هذا بـ  vite ESM-based dev build أو سير العمل القائم على وحدات ES.

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

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

وكتجربة شخصية، عملت بـ Vite في تطبيق واجهة أمامية بـ VueJS وكانت تجربة التطوير رائعة مقارنة بالتطبيقات التي اعتمدت على ويب باك فيها. وبما أن Vite مقدم من مطوري VueJS أنفسهم فأظن أنه سيكون هنالك تقارب أكثر بين VueJS و Laravel في المستقبل.

Vite هو أداة بناء حديثة تُستخدم لتسريع تطوير تطبيقات الويب. تم تطويرها بواسطة Evan You، مؤسس Vue.js، وهي تُركز على تقديم تجربة تطوير سلسة وسريعة. يختلف Vite عن الأدوات التقليدية مثل webpack في بعض الجوانب الأساسية:

سرعة التطوير: Vite يستخدم خادم تطوير يعتمد على ES Modules (ESM) بدلاً من التحزيم التقليدي للملفات، مما يعني أن التعديلات على الكود تُظهر نتائجها بشكل فوري تقريبًا دون الحاجة لإعادة التحزيم الكامل.

تحسين الأداء: Vite يُعيد تحميل الأجزاء المتغيرة من الكود فقط، بدلاً من إعادة تحميل المشروع بأكمله، مما يقلل من زمن التحميل ويزيد من سرعة التطوير.

تحزيم الإنتاج: عند بناء المشروع للإصدار النهائي، يستخدم Vite أدوات مثل esbuild لتسريع عملية التحزيم مقارنة بالأدوات التقليدية مثل webpack.

الانتقال من webpack وLaravel Mix إلى Vite

Laravel Mix هو أداة بناء مبنية على webpack ومُخصصة لتبسيط عملية التحزيم في تطبيقات Laravel. عند الانتقال إلى Vite، يحدث ما يلي:

تحسين الأداء: مع Vite، ستلاحظ تحسينًا كبيرًا في سرعة التحميل وإعادة التحميل أثناء التطوير، مما يجعل تجربة التطوير أكثر سلاسة وسرعة.

التجربة الجديدة: Vite يوفر تجربة تطوير محدثة ومبنية على ES Modules، مما يتطلب تعديلات على كيفية تكوين وتحزيم الأصول.

تغييرات في التكوين: إذا كنت معتادًا على إعدادات webpack وLaravel Mix، فستحتاج إلى التكيف مع إعدادات Vite الجديدة. Vite يقدم تكوينًا أبسط وأسرع في العديد من الحالات، لكن قد يتطلب تعلم كيفية استخدامه بفعالية.

الإضافات والتكاملات: Vite يدعم مجموعة واسعة من الإضافات للتكامل مع الأدوات المختلفة، مما يتيح لك تخصيص إعدادات التحزيم الخاصة بك وفقًا لاحتياجات المشروع.

التوافق مع Laravel: Laravel 10 أدخل دعمًا رسميًا لـ Vite، مما يعني أنه سيكون لديك دعم مدمج ومتكامل لتقنيات Vite في إطار Laravel، مما يسهل الانتقال ويقلل من الجهد المطلوب لإعادة تكوين المشروع.

باختصار، الانتقال إلى Vite من webpack وLaravel Mix يمكن أن يساهم في تحسين أداء تطوير التطبيقات وتجربة التطوير، لكنه يتطلب فهمًا جديدًا لبعض المفاهيم والأدوات.