وداعاً لبطء Vue CLI: كيف تبني تطبيقاتك بسرعة الصاروخ مع Vite

لو أنت مبرمج بتشتغل بـ Vue.js بقالك فترة، أكيد مريت باللحظة اللي بتفتح فيها مشروعك القديم، بتكتب أمر التشغيل، وبتفضل مستني الـ Dev Server يخلص (Build Process) وقته يطول، ولما بتعدل سطر كود واحد، بتلاقي المتصفح بيعمل "Loading" وبياخد وقت طويل عشان يعرض التغيير. الشعور ده مؤلم، وبيقتل الإنتاجية والإبداع. هنا بييجي دور Vite، الأداة اللي غيرت قواعد اللعبة في تطوير تطبيقات الويب (Web Development).

ليه لازم تسيب Vue CLI وتنتقل لـ Vite؟

زمان، كنا بنعتمد بشكل أساسي على Vue CLI، اللي بيعتمد كلياً على Webpack. الفكرة في Webpack إنه بيعمل Bundle لكل الملفات في المشروع بتاعك قبل ما يبدأ السيرفر. فكل ما مشروعك يكبر، وقت الانتظار بيزيد. لكن Vite فكرته مختلفة تماماً. هو بيعتمد على الـ Native ES Modules الموجودة في المتصفحات الحديثة. ببساطة، Vite بيقدم الملفات للمتصفح بس لما يطلبها، من غير ما يحتاج يعمل Bundling لكل حاجة من البداية. ده بيخلي سرعة التشغيل (Cold Start) فورية مهما كان حجم المشروع.

إزاي تبدأ مشروع جديد بـ Vite و Vue 3؟

البداية أسهل مما تتخيل. بدل ما تقعد تختار إعدادات كتير في الـ CLI، Vite بيوفر عليك وقت ومجهود كبير. افتح الـ Terminal بتاعك واكتب الأمر ده:

npm create vite@latest my-vue-app -- --template vue

بعدها هتدخل جوه فولدر المشروع، وتعمل تثبيت للمكتبات (Dependencies) وتشغل السيرفر:

cd my-vue-app
npm install
npm run dev

في ثانية واحدة، هتلاقي السيرفر شغال وظهرلك الرابط على المتصفح. السرعة دي هي اللي هتخليك تركز في الكود (Code) مش في انتظار الـ Tooling.

مميزات الـ Hot Module Replacement (HMR) في Vite

واحدة من أهم مميزات Vite هي سرعة الـ Hot Module Replacement (HMR). لو جربت تعدل أي компонент (Component) في Vue 3، هتلاقي التغيير مسمع في المتصفح في أقل من مللي ثانية. الـ HMR في Vite بيعتمد على الـ Native ESM، فبيعمل تحديث للجزء اللي اتعدل بس، مش بيعمل إعادة تحميل للصفحة كاملة ولا بيعيد بناء كل الملفات، وده بيوفر تجربة تطوير (Developer Experience) خيالية.

نصيحة من أخ لمبرمج زيك

عشان تكون مبرمج محترف، لازم دايماً تجرب الأدوات الحديثة. التمسك بالأدوات القديمة لمجرد إننا "متعودين عليها" بيوقف تطورنا. Vite مش مجرد أداة أسرع، دي فلسفة جديدة في التعامل مع بناء المشاريع. ابدأ بمشروع صغير، جرب Vite في الـ Workflow بتاعك، وهتلاقي فرق كبير في مودك وأنت بتكتب الكود. استمر في التعلم، واهتم دائماً بتطوير بيئة العمل (Development Environment) الخاصة بيك، لأن دي الأدوات اللي بتشكل مستواك التقني.