create-react-app بطيء — انتقلت إلى Vite

لسنوات، كان كل مشروع React أبدأه يبدأ بالطريقة نفسها: npx create-react-app. يفعل ما يعد به — ملفات القالب وdev server وبيئة عمل جاهزة — لكنني أصبحت منزعجًا بصمت. تجهيز تطبيق بسيط كان يأخذ ثلاث إلى أربع دقائق في كل مرة. ثم جربت Vite، ولن أعود.

ما هو Vite فعلًا

Vite أداة بناء — الوظيفة نفسها التي يؤديها Webpack في الخلفية مع create-react-app. الفرق في طريقة الوصول. فبدل تجميع تطبيقك كله قبل تقديمه، يقدّم Vite وحدات ES الأصلية أثناء التطوير ويجمّع (bundle) فقط للإنتاج. ولهذا يبدأ الـ dev server تقريبًا فورًا وتبدو التحديثات الساخنة (hot updates) لحظية.

إنشاء تطبيق React

بدأ Vite في عالم Vue، لكنه يأتي الآن بقوالب لكثير من الـ frameworks. للحصول على تطبيق React، اضبط القالب على react:

npm create vite@latest vite-react-app -- --template react

ثم ادخل المجلد وثبّت الحزم وشغّل الـ dev server:

cd vite-react-app
npm install
npm run dev

افتح المتصفح وستحصل على صفحة React الافتتاحية المألوفة — الشعار وزر العدّاد وبقية المكونات — لكنها وصلت في ثوانٍ.

القوالب التي يمكنك الاختيار منها

Vite ليس لـ React فقط. يقبل الخيار --template قائمة كاملة، مع نسخة TypeScript لكل قالب:

vanilla   vanilla-ts
vue       vue-ts
react     react-ts
preact    preact-ts
lit       lit-ts
svelte    svelte-ts

هل كان الأمر يستحق؟

استغرق التثبيت والتشغيل على خادم محلي نحو 55 ثانية من البداية إلى النهاية. السرعة وحدها أقنعتني للنماذج الأولية والتطبيقات الصغيرة. ومع ذلك سأختبره على مشروع كبير قبل أن أراهن به على مشروع ضخم — لكن في الاستخدام اليومي لبدء شيء جديد، حلّ Vite محل create-react-app عندي تمامًا.