ویت vite چیست و چرا باید از آن استفاده کنیم؟

ویت Vite چه ویژگیهایی دارد؟

آغاز به کار سریع سرور Instant Server Start

جایگزینی ماژول خیلی سریع Lightning Fast HMR

دسترسی به ابزارها مانند تایپ اسکریپت و jsx و css و ... Rich Features

و ...

چرا از ویت Vite استفاده کنیم؟

چه مشکلی وجود داشت؟ قبل از اینکه ماژول‌های اکما اسکریپت ES در مرورگرها در دسترس باشند، توسعه‌دهندگان هیچ مکانیزم بومی برای نوشتن جاوا اسکریپت به شکل ماژولار نداشتند. به همین دلیل است که همه ما با مفهوم 'بسته بندی bundling' آشنا هستیم: استفاده از ابزارهایی که ماژول های منبع ما را واکاوی میکنند، پردازش می کنند و منابع ما را به فایل هایی متصل می کنند که می توانند در مرورگر اجرا شوند.

با گذشت زمان، ابزارهایی مانند webpack، Rollup و Parcel را دیده‌ایم که تجربه توسعه را برای توسعه‌دهندگان frontend بسیار بهبود بخشیدند.

با این حال، همانطور که ما برنامه های جاه طلبانه بیشتری می سازیم، مقدار جاوا اسکریپت که با آن سروکار داریم نیز به طور چشمگیری افزایش می یابد. غیر معمول نیست که پروژه‌های مقیاس بزرگ شامل هزاران ماژول باشند. ما شروع به برخورد با یک گلوگاه عملکرد برای ابزارهای مبتنی بر جاوا اسکریپت کرده‌ایم: اغلب ممکن است یک انتظار طولانی غیرمنطقی طول بکشد (گاهی اوقات تا چند دقیقه!) تا یک سرور توسعه‌دهنده به راه بیفتد، و حتی با Hot Module Replacement (HMR)، ویرایش فایل ممکن است آنچنان طول بکشد که چند ثانیه آن در مرورگر منعکس شود. حلقه بازخورد کند می تواند بر بهره وری و شادی توسعه دهندگان تأثیر بگذارد.

ویت Vite قصد دارد با استفاده از پیشرفت‌های جدید در اکوسیستم به این مسائل رسیدگی کند:

در دسترس بودن ماژول‌های ES بومی در مرورگر

و ظهور ابزارهای جاوا اسکریپت نوشته شده در زبان‌های کامپایل به بومی compile-to-native languages.

برطرف کردن مشکل کندی آغاز سرور: هنگام راه‌اندازی سرد cold-starting سرور توسعه‌دهنده، یک راه‌اندازی ساخت مبتنی بر بسته‌ bundler-based باید مشتاقانه بخزد و کل برنامه شما را قبل از اینکه بتواند ارائه شود، بسازد.

ویت Vite زمان شروع سرور توسعه دهنده را با تقسیم ماژول های یک برنامه به دو دسته بهبود می بخشد: وابستگی ها و کد منبع.

وابستگی ها Dependencies: وابستگی ها عمدتاً جاوا اسکریپت ساده هستند که اغلب در طول توسعه تغییر نمی کنند. برخی از وابستگی های بزرگ (مانند کتابخانه های کامپوننت با صدها ماژول) نیز برای پردازش بسیار گران هستند. وابستگی ها همچنین ممکن است در قالب های مختلف ماژول (مانند ESM یا CommonJS) ارسال شوند.

وابستگیهای از پیش آماده ویت، از esbuild استفاده میکنند. esbuild با زبان Go نوشته شده است و وابستگی‌ها را 10 تا 100 برابر سریع‌تر از باندلرهای مبتنی بر جاوا اسکریپت پیش‌ آماده سازی می‌کند.

کد منبع: اغلب حاوی جاوا اسکریپت دستکاری شده ای است که نیاز به تبدیل دارد (مانند اجزای JSX، CSS یا Vue/Svelte)، و بیشتر مواقع ویرایش می شود. همچنین، لازم نیست همه کد منبع به طور همزمان بارگیری شوند (مثلاً با جداسازی کد مبتنی بر مسیر : route-based code-splitting).

ویت Vite کد منبع را از طریق ESM بومی ارائه می کند. این اساساً به مرورگر اجازه می‌دهد تا بخشی از کار یک باندلر را به عهده بگیرد: Vite فقط باید کد منبع را در صورت درخواست تغییر دهد و ارائه کند، همانطور که مرورگر آن را درخواست می‌کند. درون ریزی و ایمپورت پویای کد بسته به شراط فقط در صورتی پردازش می شود که واقعاً در صفحه فعلی استفاده شود.