تبسيط Vite
تعمل الأدوات القديمة مثل Webpack أو CRA عن طريق تجميع مشروعك بالكامل أولاً. فهي تقرأ كل ملف وتدمجها في ملف JavaScript واحد كبير. هذا الأسلوب يعمل مع المشاريع الصغيرة، لكنه يفشل في المشاريع الكبيرة التي تحتوي على آلاف الوحدات (modules). تستغرق الحزم الكبيرة ثوانٍ أو دقائق لبنائها، وفي كل مرة تحفظ فيها ملفاً، تقوم الأداة بإعادة بناء أجزاء كبيرة من الحزمة.
يعمل Vite بشكل مختلف. فالمتصفحات الحديثة تدعم ES modules بشكل أصلي. لا يقوم Vite بتجميع الكود الخاص بك أثناء عملية التطوير، بل يقدم كل ملف كوحدة منفصلة فقط عندما يطلبها المتصفح.
تخيل مطعم بوفيه مفتوح. يقوم الطاهي بطهي كل طبق قبل فتح الأبواب. إذا أردت تغييراً بسيطاً، يجب على الطاهي إعادة تحضير معظم البوفيه. ستنتظر طويلاً للحصول على طعامك. هكذا يعمل Webpack.
الآن تخيل مطعماً بنظام الطلب من القائمة (à la carte). تُفتح الأبواب فوراً. تطلب طبقاً واحداً، فيقوم الطاهي بتحضير ذلك الطبق فقط. إذا أردت تحلية لاحقاً، سيقوم الطاهي بتحضير التحلية فقط. لن تنتظر طهي القائمة بأكملها. هكذا يعمل Vite.
يستخدم Vite استراتيجيتين مختلفتين لاحتياجين مختلفين:
التطوير (vite dev)
- الاستراتيجية: تقديم وحدات ESM الأصلية دون تجميع.
- السرعة: فورية. لا تعتمد على حجم المشروع.
- السبب: طلبات الشبكة المحلية سريعة.
الإنتاج (vite build)
- الاستراتيجية: تجميع كل شيء باستخدام Rolldown.
- السرعة: تعتمد على حجم المشروع.
- السبب: مئات الملفات المنفصلة ستؤدي إلى الكثير من طلبات HTTP للمستخدمين الحقيقيين. التجميع يجعل الموقع النهائي أسرع بالنسبة لهم.
يمنحك Vite السرعة أثناء البرمجة والأداء العالي عند الإطلاق.
المصدر: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62