اذهب إلى المحتوى
  • 1

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

ابراهيم الخليل سماني

السؤال

السلام عليكم

مسألة تحزيم الأصول او الملفات (css,js ) في laravel  اريد الإطلاع عليه بشكل اكبر وماهو webpack  و laravel mix و لماذا إستعملت مؤخرا vite  و ما الفرق بينهما ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 4

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 في المستقبل.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...