Create React App (CRA) مدت‌هاست که ابزاری است که برای بسیاری از توسعه‌دهندگان در تمام سطوح مهارت در ساخت برنامه React (مبتدی، متوسط و حتی متخصص) مورد استفاده قرار می‌گیرد. با این حال، دارای معایب قابل توجهی است که سرعت و عملکرد آن می باشد.
به خوبی شناخته شده است که CRA می تواند در حین ساخت یک پروژه و راه اندازی یک سرور توسعه تا حدودی کند باشد و تقریبا 5 تا 10 دقیقه نیاز دارد (بسته به عواملی مانند هارد دیسک و مشکلات اتصال به اینترنت).من قصد دارم ابزاری به نام Vite را به شما معرفی کنم. Vite یک ابزار ساخت شبیه به Webpack است (CRA از Webpack در زیر hood استفاده می کند). برای مهاجرت از Webpack به vite اینجا را بررسی کنید.
در این مقاله، می آموزیم که چطور از طریق فرآیند ساخت یک React App با Vite را یادبگیریم. شما با تفاوت های CRA و Vite و همچنین برخی از ویژگی ها و مزایای آن و همچنین نحوه ایجاد یک React App با Vite آشنا خواهید شد.
وایت چیست؟
Vite، با تلفظ /vit/، مانند "veet" نسل بعدی از ابزارهای frontend است. با بهبود تجربه توسعه برای پروژه های وب مدرن، بر سرعت و عملکرد تمرکز دارد.
Vite توسط Evan You، که خالق Vue.js است، ایجاد شده است، اما این ابزار فقط Vue نیست. می توان از آن برای React، Preact، Svelte، Vue، Vanilla JS و LitElements استفاده کرد.
از دو بخش عمده تشکیل شده است:
یک سرور توسعه دهنده که از Hot Module Replacement (HMR) برای به روز رسانی ماژول ها در طول اجرای برنامه پشتیبانی می کند. وقتی تغییراتی در کد منبع یک برنامه ایجاد می شود، به جای کل برنامه، فقط تغییرات به روز می شوند. این ویژگی به سرعت بخشیدن به زمان توسعه کمک می کند.
یک دستور ساخت که کد شما را با Rollup، از پیش پیکربندی شده برای خروجی assist های استاتیک بسیار بهینه شده برای build ، دسته بندی می کند.
ما در این مقاله Vite را به صورت تخصصی و عمیق بررسی کردیم، برای کسب اطلاعات بیشتر بررسی کنید.
Vite چگونه کار می کند؟
Vite در هسته خود 2 کار را انجام می دهد:
1.کد خود را در طول توسعه به صورت محلی ارائه دهید.
2.جاوا اسکریپت، CSS و سایر دارایی های خود را برای تولید با هم جمع کنید.
ابزارهای دیگری (باندلر) وجود دارند که همین کار را انجام می دهند، مانند webpack، Parcel و Rollup، خب چه چیزی Vite را متفاوت می کند؟
مشکل ابزارهای ذکر شده در بالا این است که آنها باید همه چیز را در هر ذخیره build کنند، و اگر یک برنامه بسیار بزرگ دارید، که هر بار که ذخیره می کنید ممکن است چندین دقیقه طول بکشد، حتی با بارگذاری مجدد در برخی از فریم ورک ها، سرعت به روز رسانی به طور قابل توجهی افزایش می یابد. با اضافه کردن کد و وابستگی بیشتر به برنامه، کندتر می شود.
وایت رویکرد متفاوتی برای این موضوع اتخاذ کرده است، نوعی رویکرد معکوس. Vite بلافاصله سرور را راه‌اندازی می‌کند، وابستگی‌هایی که اغلب تغییر نمی‌کنند را می‌گیرد و با استفاده از esbuild آنها را از قبل باندل می‌کند.
از سوی دیگر، Vite از تقسیم کد مبتنی بر مسیر استفاده می‌کند تا بفهمد چه بخش‌هایی از کد واقعاً باید بارگذاری شوند، و لازم نیست همه چیز را از قبل باندل کند.
Vite کد منبع را با استفاده از پشتیبانی بومی ES Module در مرورگرهای مدرن ارائه می دهد. این به مرورگر اجازه می‌دهد تا کار بسته‌بندی در توسعه را انجام دهد، که در نتیجه باعث می‌شود کد شما فوراً بارگیری شود، مهم نیست برنامه چقدر بزرگ باشد.
همچنین از Hot Module Replacement برای یک حلقه بازخورد بسیار سریع در طول توسعه پشتیبانی می کند.
هنگام build کردن برای production که، Vite از Rollup در زیر هود استفاده می کند، بنابراین لازم نیست نگران پیکربندی آن باشید.
چرا از Vite بیش از CRA استفاده کنیم؟
ممکن است بپرسید که چرا باید از Vite استفاده کنید و چگونه کار می کند.
ما چند مزیت را در بخش قبل بررسی کردیم، بنابراین من فقط آنها را در اینجا کامل تر می کنم.
کارایی
پیش‌باندلینگ با ESbuild باعث می‌شود 10 تا 100 برابر سریعتر از استفاده از هر باندلر JS دیگری باشد. این به بهبود سرعت صفحه و تبدیل ماژول های CommonJS / UMD به ESM کمک می کند.
Hot Module Replacement(HMR)
Vite از قابلیت های HMR برای پیگیری تغییرات در برنامه شما بدون بارگیری مجدد صفحه کامل استفاده می کند. با HMR API، مرورگر فقط بخش اصلاح شده صفحه را بارگیری می کند و همچنان وضعیت برنامه را حفظ می کند.
شما نیازی به تنظیم دستی این موارد ندارید - وقتی یک برنامه را از طریق create-vite ایجاد می‌کنید، الگوهای انتخابی از قبل برای شما از قبل پیکربندی شده‌اند.
پشتیبانی از ماژول بومی ECMAscript
Vite به صورت بومی از ماژول های ES پشتیبانی می کند. این به شما امکان می‌دهد تا برای مرورگر با واردات ساده مانند Typescript توسعه دهید و آنها را به نسخه‌های وارداتی مناسب در ساخت تبدیل می‌کند.
ویژگی های غنی
پشتیبانی خارج از جعبه از TypeScript، JSX، CSS و موارد دیگر.
پیش نیازها
قبل از استفاده از Vite، به چند پیش نیاز نیاز دارید:
Node.js نسخه 14.18 یا بالاتر
مدیر بسته - Npm یا Yarn
مرورگر سازگار برای توسعه
نیاز سوم مرورگری است که از assist های پویا پشتیبانی کند. با مراجعه به این آدرس می توانید بررسی کنید که آیا مرورگر شما پشتیبانی می شود یا خیر.
اکثر مرورگرهای مدرن پشتیبانی می شوند، به استثنای مرورگرهای Internet Explorer، Opera Mini و Baidu. اما اگر از یک نسخه جدید کروم، اج، سافاری یا فایرفاکس استفاده می‌کنید، باید آماده باشید.
ایجاد پروژه با Vite
برای ایجاد یک برنامه Vite، ترمینال خود را باز کرده و به پوشه ای که می خواهید برنامه Vite را در آن ذخیره کنید، بروید. سپس این دستور را اجرا کنید:
npm create vite@latestاز شما خواسته می شود که یک فریمورک انتخاب کنید. در این جا، ما از React استفاده خواهیم کرد، بنابراین React را انتخاب کنید.
همچنین می توانید مستقیماً قالب مورد نظر و نام پروژه را در یک خط مشخص کنید:
npm create vite@latest my-react-app --template react
دقت کنید که my-react-app نام برنامه Vite است که می خواهیم ایجاد کنیم. می توانید آن را به هر نامی که دوست دارید تغییر دهید.
سپس دستورات زیر را در ترمینال اجرا کنید:
cd my-react-app
npm install
npm run devبا اجرای دستور بالا سرور توسعه راه اندازی می شود. سپس مرورگر خود را باز کنید و http://localhost:3000 را وارد کنید.
نتیجه
ما به این موضوع پرداختیم که Vite چیست، چگونه کار می کند و برخی از ویژگی های آن آشنا شدیم. ما همچنین یاد گرفتیم که چگونه برنامه ها را با استفاده از Vite تنظیم کنیم.
برای این پروژه، دستور create vite app در 10 ثانیه تنظیم شد. بعد از آن npm install را برای نصب وابستگی ها اجرا کردم که 35 ثانیه طول کشید. بنابراین، در مجموع، پروژه در 45 ثانیه راه اندازی شد. که من مطمئن هستم که شما موافق خواهید بود بسیار سریعتر از CRA.
خوشحال می شوم نظرات تون را در بخش نظرات بشنوم و اگر از این مقاله لذت بردید یا آن را مفید دیدید، لطفاً آن را با دوستان و همکاران خود به اشتراک بگذارید.