هل ما زلت تستخدم تطبيق create-react-app لإعداد مشروع React الخاص بك؟ قم بالتبديل إلى Vite للحصول على أداء أفضل وسرعة تطوير أسرع.

عند بدء مشروع React جديد ، يلجأ العديد من المطورين إلى إنشاء رد فعل التطبيق كأداة go-to command لإعداد المشروع وتكوينه. ومع ذلك ، فإن Vite هو بديل أفضل. يوفر أوقات تطوير أسرع وأداء أفضل.

ما هو Vite؟

Vite هو أداة بناء وخادم تطوير مصمم لتحسين عملية تطوير تطبيقات الويب الحديثة. يقوم بذلك عن طريق تقسيم وحدات التطبيق الخاصة بك إلى تبعيات ورمز المصدر. التبعيات هي وحدات لا تتغير كثيرًا ، بينما عادةً ما يتم تحرير التعليمات البرمجية المصدر بشكل متكرر أثناء التطوير.

يستخدم Vite esbuild، أداة تجميع تعتمد على Go وهي أسرع بكثير من الحزم التقليدية المستندة إلى JavaScript لتسريع عملية إنشاء الكود المصدري. كما أنه يجمع تبعيات تطبيقك مسبقًا ويقدم شفرة المصدر عبر ESM الأصلي ، السماح للمتصفحات بتحسين تحميل الوحدات من أجل تطبيق أكثر كفاءة وأسرع أداء. عندما يحين وقت نشر تطبيقك في الإنتاج ، فإن Vite لديه أمر إنشاء مدمج يعمل تلقائيًا على تحسين تطبيقك للنشر ، مما يضمن تشغيل تطبيقك بسلاسة.

instagram viewer

إنشاء مشروع Vite

قبل إنشاء مشروع Vite ، لاحظ أن Vite يتطلب الإصدار 14.18+ أو 16+ من Node.js. يمكنك الرجوع إلى هذه المقالات لتثبيت Node على جهاز Windows أو Ubuntu.

  • كيف قم بتثبيت Node.js على نظام Windows.
  • يتعلم كيفية تثبيت Npm و Node.js على Ubuntu

قم بإنشاء مشروع Vite عن طريق تشغيل هذا الأمر في المحطة.

npm إنشاء vite @ latest

بمجرد بدء تنفيذ الأمر ، سيُطلب منك اسم المشروع. اكتب اسم مشروعك وانقر فوق إدخال.

بعد ذلك ، سيطالبك Vite بتحديد إطار عمل. حدد React.

سيطلب منك Vite أيضًا تحديد متغير. حدد JavaScript.

عندما يكمل Vite سقالات المشروع ، انتقل إلى الدليل الذي ينشئه ، وقم بتثبيت التبعيات عبر npm.

تثبيت npm

لتشغيل المشروع ، استخدم هذا الأمر:

npm تشغيل dev

يجب أن تكون هذه الصفحة الرئيسية.

يمكنك البدء في تعديل مشروعك وستنعكس التغييرات التي أجريتها في المتصفح.

استخدم Vite للحصول على سرعة تطوير سريعة

عادةً ما تكون CRA (create-reaction-app) هي الأداة الافتراضية لإعداد هيكل المشروع وتكوينه لتطبيق React. إنه ملائم حيث تم إعداد كل شيء من أجلك ، ولكن يمكن أن يكون إنشاءه وإعادة تحميله بطيئًا أثناء التطوير.

من ناحية أخرى ، يستخدم Vite وحدات ES أصلية في المتصفح لتوفير أوقات بناء أسرع. إذا كنت لا ترغب في استخدام Vite ، فيمكنك اختيار إطار عمل تعريف React مثل Next.js لأنه مصمم أيضًا ليكون عالي الأداء.