مقارنة بين Webpack و Vite: ليه كل مطوري React نقلوا لـ Vite؟
يا هلا بيك يا بشمهندس! فكرت في يوم من الأيام وأنت قاعد تشتغل على مشروع رياكت (React) كبير، ليه لما بتدوس زرار السيف (Save) بتلحق تشرب كوباية الشاي، أو تفتح الموبايل تقلب في الفيس لحد ما السيرفر يحصل له ريلود (Reload)؟ الوجع ده كلنا عشناه، خصوصاً مع أداة تجميع الكود القديمة والطيبة ويب باك (Webpack). لفترة طويلة، كانت هي الملك المتوج، بس الدنيا اتغيرت وظهر بطل جديد اسمه فيت (Vite) غير قواعد اللعبة تماماً.
في المقال ده، هناخد رحلة تفصيلية نفهم فيها ليه كل مطوري رياكت (React Developers) سابوا ويب باك (Webpack) وراحوا لـ فيت (Vite)، وإزاي الأداة دي غيرت مفهوم سرعة بيئة التطوير (Development Environment) وبشكل خاص التحديث الحطحي السريع (Hot Module Replacement - HMR).
Table of contents [Show]
إيه هو المشكلة الحقيقية مع Webpack؟ (القصة باختصار)
علشان تفهم ليه كل الناس نقلت، لازم تفهم المشكلة فين أصلاً. لما كنت بتشتغل بـ ويب باك (Webpack) أو حتى أداة الإعدادات الجاهزة كرييت رياكت أب (Create React App)، كان النظام بيعتمد على تجميع أو حزم الكود (Bundling) من أول وجديد لكل الملفات قبل ما السيرفر يشتغل.
تخيل عندك مشروع فيه ألف ملف جافا سكريبت (JavaScript Files). الـ Webpack كان بيقعد يلف على كل ملف، ويعمله معالجة، ويجمعه في حزمة ضخمة (Bundle) وبعدين يعرضه في المتصفح (Browser). كل ما المشروع كبر، كل ما وقت البناء (Build Time) ووقت الـ HMR زاد وبقى ممل جداً.
دخول البطل: إزاي بيشتغل Vite؟
كلمة Vite دي كلمة فرنسية معناها "سريع"، وده حقيقي تماماً. فكرة فيت (Vite) مبنية على فكرة ثورية مختلفة تماماً عن ويب باك (Webpack). بدل ما يعمل تجميع لكل الكود الأول، فيت بيقسم المشروع لقسمين أساسيين:
- أكواد التبعيات (Dependencies): الحاجات اللي زي مكتبات رياكت (React) ودي غالباً مش بتتغير. فيت بيعملها تجميع مرة واحدة باستخدام أداة خارقة اسمها إيسبولد (esbuild)، ودي مكتوبة بلغة جو (Go) وسريعة بشكل مرعب.
- مصدر الكود بتاعك (Source Code): الملفات اللي أنت بتكتبها بإيدك. دي فيت مش بيجمعها خالص وهو بيشغل السيرفر! هو بيستنى المتصفح يطلب الملف، وساعتها بيعمله معالجة فورية ويقدمه باستخدام وحدات الكود الحديثة (ES Modules - ESM).
النتيجة؟ وقت تشغيل السيرفر (Dev Server Start) بيبقى في حدود أجزاء من الثانية، مهما كان حجم مشروعك كبير!
مقارنة مباشرة: Webpack vs Vite
تعال نبص بالأرقام والواقع على الفرق بين الاتنين:
- سرعة تشغيل السيرفر (Cold Start): مع Webpack ممكن تاخد من 10 ثواني لـ دقيقة في المشاريع الكبيرة. مع Vite بتفتح في أقل من ثانية تقريباً!
- التحديث السريع (HMR): في Webpack كل ما المشروع يكبر، الـ HMR بيتقل. في Vite، مهما كبر المشروع، الـ HMR بيester اللحظة اللي بتعمل فيها حفظ للملف.
- الـ Bundling للإنتاج (Production Build): فيت بيستخدم أداة متطورة اسمها Rollup للإنتاج، وهي منظمة جداً وبتديك كود مضغوط وخفيف (Optimized Build).
إزاي تحول مشروعك القديم من Create React App لـ Vite؟
لو عندك مشروع قديم شغال بـ Create React App وعايز تنقله لـ Vite وتستمتع بالسرعة، الخطوات بسيطة جداً. تعال نشوف إزاي نعمل كده خطوة بخطوة:
الخطوة الأولى: مسح الحزم القديمة وإضافة Vite
افتح الترمنال (Terminal) في فولدر المشروع، واحذف حزم كرييت رياكت أب:
npm uninstall react-scriptsبعدين ثبّت فيت وحزمة تشغيل رياكت الخاصة بيه:
npm install -D vite @vitejs/plugin-reactالخطوة الثانية: تعديل ملف HTML الرئيسي
في مشاريع الـ CRA القديمة، ملف الـ index.html كان جوه فولدر اسمه public وكان بيستخدم متغيرات زي %PUBLIC_URL%. في Vite، انقل ملف index.html ليكون بره في الجذر الرئيسي للمشروع (Root Directory)، وشيل أي متغيرات قديمة، وضيف سكريبت التشغيل العادي في آخره جوه الـ body بالشكل ده:
<!doctype html>
<html lang="ar">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مشروعي السريع بـ Vite</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<body>
</html>الخطوة الثالثة: إنشاء ملف إعدادات Vite
في جذر المشروع، اعمل ملف جديد سميه vite.config.js واكتب فيه الإعداد البسيط ده علشان يدعم رياكت:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
الخطوة الرابعة: تعديل أوامر الـ package.json
أخيراً، افتح ملف package.json وعدل أدوَار التشغيل (Scripts) علشان تستخدم فيت بدل العجوز ويب باك:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}بس يا سيدي! ادخل دلوقتي على الترمنال واكتب npm run dev واتفرج على السرعة الجنونية اللي السيرفر هيفتح بيها.
خاتمة ونصيحة من أخ
التطور التكنولوجي في عالم البرمجة مش بيوقف، واللي بيقعد يشتغل بالطرق القديمة بيضيع وقت وجهد كتير على الفاضي. الانتقال من Webpack لـ Vite مابقاش "رفاهية"، ده بقى أساسي علشان تعلي الإنتاجية بتاعتك وتستمتع وأنت بتكتب كود. نصيحتي ليك: متخافش من التغيير، جرب دايماً الأدوات الحديثة، واقرا الـ Documentation، وخلي دائماً تركيزك على حل المشكلات البزنس ومشكلة بطء الأدوات!
