ما هي Vite؟
Vite (كلمة فرنسية تعني «سريع» وتُلفظ «فيت») أداة بناء مفتوحة المصدر للواجهات الأمامية. أطلقها Evan You، مبتكر Vue، عام 2020، وصارت منذ 2021 تعمل مع أي إطار عمل. وتتكون من جزأين: خادم تطوير يُستخدم أثناء بناء الموقع، وأمر بناء يحوّل الشيفرة المصدرية إلى ملفات محسّنة للموقع المنشور.
أثناء التطوير تقدّم Vite الشيفرة إلى المتصفح على هيئة وحدات JavaScript أصلية، فلا يُعالَج إلا ما تحتاجه الصفحة من ملفات. وعندما يتغير ملف، يحدّث الاستبدال الفوري للوحدات (HMR) ذلك الجزء وحده دون إعادة تحميل الصفحة كاملة. أما للإطلاق فتحزم Vite الشيفرة باستخدام Rolldown، وهو محزّم سريع مكتوب بلغة Rust، وتقسّمها إلى أجزاء لا تُحمَّل إلا حيث تلزم، وتصغّرها، وتضيف إلى اسم كل ملف بصمة مستمدة من محتواه، فيحتفظ به المتصفح في ذاكرته المؤقتة طويلًا وبأمان.
Vite مجانية ومفتوحة المصدر بموجب ترخيص MIT، ويتولى فريق Vite الإشراف عليها. وفي عام 2024 أسس Evan You شركة VoidZero للعمل على Vite وأدوات مرتبطة بها، ثم انضمت VoidZero إلى Cloudflare عام 2026. وتبقى Vite غير مرتبطة بأي مزوّد، فتعمل المواقع المبنية بها على أي استضافة. وهي نقطة البداية المعتادة لمشاريع Vue الجديدة، وعليها يقوم Astro أيضًا.
أين نستخدم Vite
تعمل Vite خلف الكواليس في مشاريع الواجهات الأمامية لدينا. ونستخدمها خصوصًا في:
مشاريع Vue وReact
تبدأ الواجهات واللوحات والتطبيقات المبنية بـ Vue أو React من إعداد Vite، مع TypeScript حيث يفيد. والأداة نفسها تقدّم المشروع أثناء التطوير وتبنيه للإطلاق.
مواقع JavaScript العادية
لا يحتاج كل موقع إلى إطار عمل. ففي المواقع الأبسط المبنية بـ HTML وCSS وJavaScript، تحزم Vite الوحدات وتعالج CSS وتمنح كل ملف اسمًا يناسب التخزين المؤقت.
مراجعات تصميم حيّة
لأن التغييرات تظهر في المتصفح فورًا، يستطيع المطوّر والمصمم ضبط المسافات والألوان والحركة معًا على الشاشة، ومقارنة النتيجة بتصميم Figma أولًا بأول.
مكوّنات قابلة للتضمين
يمكن تحزيم حاسبة أو نموذج حجز أو تطبيق صغير يجب أن يظهر في أكثر من موقع مرة واحدة عبر وضع المكتبة في Vite، ثم إضافته إلى كل موقع.
لماذا Vite؟
استجابة فورية
يبدأ خادم التطوير بسرعة وتظهر التغييرات في لحظة، فنقضي وقتنا في تفاصيل موقعك لا في انتظار البناء.
ملفات خفيفة تناسب التخزين المؤقت
تُقسَّم الشيفرة بحيث لا تحمّل كل صفحة إلا ما تحتاجه، وتُصغَّر الملفات، وتتيح الأسماء المستمدة من المحتوى للمتصفحات ولـ Cloudflare الاحتفاظ بها في الذاكرة المؤقتة طويلًا.
مفتوحة وقابلة للنقل
أداة Vite مجانية، وتعمل مع Vue وReact وJavaScript العادية، وتنتج ملفات قياسية يمكن لأي استضافة تقديمها، فلا يُقيَّد مشروعك بمزوّد واحد.
كيف نعمل على مشروعك
في بداية المشروع نُعدّ Vite بالقالب المناسب لـ Vue أو React أو JavaScript العادية، ونضيف TypeScript حيث يفيد، ونتفق على بنية المجلدات. وطوال التطوير يظهر كل تغيير في المتصفح فورًا، فتبقى مراجعات التصميم قصيرة ومركّزة.
قبل الإطلاق نشغّل بناء الإنتاج، ونتحقق من حجم كل ملف ومما تحمّله كل صفحة، ونقيس النتيجة عبر Lighthouse. ثم تُقدَّم الملفات النهائية عبر Cloudflare، ونسلّمك المشروع مع إعدادات البناء وسجله الكامل.
