Vite.js چیست؟

خب سلام. امروز اومدم یه بحثیو شروع کنم که کنجکاویش بیشتر از همه سهمش برای خودم بود از زمانی که یه ویدیوی 100 ثانیه ای عجیب درباره یه فریم ورک جدید از سازنده Vue.js دیدم. خیلی مشتاق شدم بیشتر دربارش بخونم.
این شد که رفتم سراغ داکیومنتش. پس با من همراه باشید :)

مقدمه

ما یه سری ابزار داریم به اسم Javascript Build Tool. کارشون اینه که کد های ما رو مدیریت میکنن و از
فاز development وارد فاز production میکنن و علاوه بر این مثلا ما اگه از یه پکیج منیجری مثل npm
استفاده کرده باشیم و سر و کارمون با پوشه ای مثل node_modules باشه. این Build Tool ها اون Dependency ها رو هم مدیریت میکنن.

Vite هم یکی از اوناست.

شروع کار
اوایل April سال 2020 آقای Evan You(کسی که توسعه دهنده فریم ورک Vue.js هستش)
این Development Server رو راه اندازی کرد. در نسخه های اولیه Vite فقط یک سرور بود
برای کامپوننت های تک فایلی Vue ( یعنی یه بخش جزئی از اون) و بعد ها رسید به جایی که الان هست .

همون طور که میدونین باندل کردن یک پروژه یعنی ادغام فایلای اون پروژه با همدیگه
یه ویژگی جالبی که Vite داره اینه که این فرآیند باندل کردن رو انجام نمیده بلکه با استفاده از
ماژول های ES ( به Es6 به بعد رجوع شود) باعث میشه سرعت فوق العاده بیشتری داشته باشیم.
یعنی یه چیزی شبیه VueCli ولی با سرعت خیلی بیشتر

نحوه کار

پشتیبانی مرورگر برای ماژول های ES6 معمولا زمانی که ماژول های ES در ابتدا در ES2016 ( یعنی همون زمان ES6 به بعد) معرفی شدند مشکلات زیادی داشت. در نتیجه، بسیاری از مرورگرهای فعلی اکنون ماژول‌های ES را به صورت Local پشتیبانی می‌کنند و به شما امکان می‌دهند از دستورات import و export به‌صورت Local استفاده کنید. همچنین، می‌توانید با مشخص کردن اینکه در حال import کردن یک ماژول با استفاده از ویژگی type+”module” در تگ اسکریپت خود، Import را در HTML خود وارد کنید:

<script type="module" src="filename.js">

اگر توی داکیومنت رسمی Vite بریم نحوه کارش این شکلیه که است که این دستورات import را دریافت کرده و آن ها را مستقیما در مرورگر اجرا می کنه. هر مرورگری که از این دستورات پشتیبانی کنه به طور خودکار آن ها را parse می کنه و سپس درخواست های HTTP را برای هر کدام از ماژول ها به Development Server ما ارسال کرده و فایل های مورد نظرش را دریافت می کنه. این مسئله باعث سرعت بسیار بالای Vite نسبت به رقیبان خود می شود. راه اندازی اولیه Vite در حدود ۱۴۰ میلی ثانیه طول می کشد اما Vue-Cli حدود ۱۹۰۰ میلی ثانیه طول خواهد کشید

یه سری قابلیت خاص!

قابلیت Bare module resolving:
قابلیت bare import به import کردن یک بخش خاص از یک ماژول اشاره داره. حتما شما تا الان کلی این دستور رو اجرا کردین: 'import { createApp } from 'vue در این دستور فقط createApp را از پکیج Vue وارد کردیم. مرورگرها هنوز از این قابلیت پشتیبانی نمی کنند( تا لحظه نوشتن این مقاله، احتمالا بعد ها عوض بشه) اما Vite فایل های جاوا اسکریپتی شما را بررسی میکنه و این دستورا رو درست میکنه

قابلیت Hot module replacement:
این قابلیت که برای سادگی بهش میگن HMR . یکی از قابلیت های بسیار کاربردی در هنگام Development است. زمانی که یکی از فایل های Js شما تغییر کند این قابلیت، تغییر را تشخیص داده و مرورگر را مستقیما به روز رسانی می کند بدون اینکه نیازی به refresh کردن اون باشه. Vite در documentation خود توضیح داده اکه قابلیت HMR اهمیتی به تعداد ماژول های شما نمی ده بنابراین هر چقدر هم که پروژه شما بزرگ باشد باز هم سرعت ایجاد تغییرات در مرورگر زیاد خواهد بود. اگر با build tool های مختلف (مخصوصا webpack) کار کرده باشید می دانید که زمان ساخت نهایی (سرعت HMR) یکی از رایج ترین شکایت های دولوپرا در این زمینه است.

قابلیت On-demand compilation:
از آنجایی که Vite از ES Modules استفاده می کنه فقط فایل هایی را کامپایل می کند که به مرورگر ریکوئست دادن. به عبارت دیگر فقط فایل هایی کامپایل می شوند که در نمایش صفحه فعلی دست دارن و فایل های دست نخورده نیز خطای ۳۰۴ (not modified) را در مرورگر برمی گردانند. این مسئله Vite را از دیگر bundler های موجود جدا می کنه چرا که این bundler ها تمام فایل های پروژه شما را کامپایل می کنن و قبل از اینکه بتوانید آن ها را ویرایش کنین، کدها را bundle می کنند. این موضوع باعث می شود که قدرت Vite در پروژه های بزرگ چند برابر شود.

قابلیت Configuration option:
احتمالا شما هم حدس می زنید که Vite مانند webpack قابلیت Configuration و اعمال تنظیمات خاص را دارد. این کار با استفاده از فایلی به نام vite.config.js (دقیقا عین Nuxt) انجام می شود که البته می توانید آن را به صورت تایپ اسکریپت نیز بنویسید (vite.config.ts). شما باید این فایل را در مسیر اصلی پروژه خود قرار بدهید اما می توانید از روش دیگری نیز استفاده کنید؛ شما می توانید با استفاده از دستور vite --config my-config.js به صورت خاص آدرس فایل پیکربندی خود را به Vite بدهید به طوری که به جای my-config.js نام فایل خود و آدرس اون رو قرار بدین

این قابلیت ها مهم ترین قابلیت های Vite هستن اما تنها قابلیت های موجود نیستن. به طور خلاصه می تونیم به این قابلیت ها هم اشاره کنیم:

• پشتیبانی از فایل های tsx و jsx
• پشتیبانی کامل از تایپ اسکریپت
• مدیریت URL منابع پروژه
• پشتیبانی از پیش پردازنده های CSS مانند SASS و همچنین ماژول های CSS
• پشتیبانی از متغیر های محیطی (environment variables)

نقشش توی Build کردن پروژه چیه؟

خوب است بدانیم علیرغم اینکه امروزه بسیاری از مرورگر ها از ES Module به صورت Local پشتیبانی می کنند، هنوز پیاده کردن سرور محصول با کد bundle نشده کار بهینه ای نیست. چرایی این موضوع به لزوم درخواست های رفت و برگشتی زیادی بر می گردد که به دلیل import های تو در تو ناچار به ارسال آنها هستیم. به همین دلیل هنوز هم بهترین روش برای پیاده سازی یک سرور محصول با کارایی و سرعت بالا، bundle کردن کد با استفاده از tree shaking و lazy-loading و تقسیم بندی کد به بخش های مختلف است. جا دارد اشاره کنیم از آنجا که esbuild هنوز برخی قابلیت هایی که برای bundle کردن کلیه ی اپلیکیشن ها نیاز داریم رو نداره. vite نیز برای bundle کردن محصول نهایی از این پکیج استفاده نمی کند.

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

در مجموع می توان گفت که vite یک محیط توسعه (development environment) است. البته این ابزار بی رقیب نیست و ابزار هایی چون WMR ،Snowpack و web/dev-server@ کار های مشابهی انجام می دن.

مشکل کند بودن آپدیت سرور رو چطور حل میکنه؟

فرض کنید در حال توسعه یه اپلیکیشن هستیم و یک سرور Development داریم که به روش bundle-based ایجاد شده است. وقتی در حین فرایند توسعه، محتوای یکی از فایل ها را تغییر می دهیم تا تغییرات اعمال شده به ازای آن را در برنامه ببینیم، نیاز است که کل اپلیکیشن مجدداً bundle شود. واضح است که با بزرگ تر شدن اپلیکیشن، این فرایند زمان بیشتری به طول می انجامد. ( اینجاس که Vite وارد میشه D: )
برای حل این مشکل، bundler ها فرایند bundle کردن در RAM سیستم اجرا میکنن، به این ترتیب به ازای تغییر یک فایل، تنها نیاز بود که بخشی از گراف ماژول های آنها تغییر کند. این موضوع کمی زمان بازسازی پروژه را بهبود می داد، اما هنوز لازم بود که bundler ها کل اپلیکیشن را مجدداً bundle کنند و صفحه مجدداً لود شود. (رفرش کردن)
برای حل این مشکل نیز bundler ها از تکنولوژی HMR یا Hot Module Replacement استفاده کردن، به این ترتیب که اجازه می دادند ماژولی که تغییر کرده، بدون تغییر سایر بخش های پروژه، جایگزین حالت قبلی اش بشه. اما با این وجود نیز سرعت مطلوب اتفاق نمی افتاد، چرا که با بزرگتر شدن اپلیکیشن، سرعت فرایند HMR نیز کاهش می یافت.
اما vite فرایند HMR را با بر پایه ی native ESM پیاده کرده است. وقتی یک فایل تغییر می کند، vite تنها لازم است زنجیره ی بین ماژول تغییر یافته و نزدیک ترین مرز HMR را تغییر دهد. روشی که باعث می شود فرایند HMR صرف نظر از حجم اپلیکیشن، همواره سرعت بالایی داشته باشد.



شروع یه پروژه

من برای این پروژه از پکیج منیجر npm شروع کردم و صد البته که با Yarn هم کار پیش میره

پس نصب npm فراموش نشه قبل شروع کار :)

بعد از دستور معروف npm init
با دستور
npm init @vitejs/app
یا برای Yarn
yarn create @vitejs/app

بعدش ازمون چند تا سوال میپرسه، مثلا اولیش اسمی هستش که برای پروژمون میخوایم
و بعدش نوع فریم ورکی که مورد استفادمون هستش

که من Vue رو انتخاب کردم

بعدش از من پرسید که Ts رو ترجیح میدی یا Js؟

که من جاوا اسکریپت رو انتخاب کردم و بعدش پروژه رو برای من با این فایل ها ساخت

عین Vue میتونین با ادیت کردن کامپوننت Hello World شروع به برنامه نویسی کنید
و اگر الان اون رو اجرا کنم با این صفحه مواجه میشم

کلام آخر : آیا ازش استفاده کنیم؟

با وجود اینکه vite جهش هایی جدی در عملکرد و سرعت توسعه ایجاد می کنه، اما هنوز بعضی ویژگی های آن به بلوغ کامل نرسیده. به عنوان مثال vite از server side rendering (رندر برنامه سمت سرور) پشتیبانی می کنه، اما هنوز کاستی هایی داردهکه برای تکمیل شدن نیازمند زمان هستن. به عنوان مثال Nuxt که ابزاری محبوب در حوزه ی فرانت اند محسوب می شه، اخیراً نسخه ی 3 (برچسب beta) خود را معرفی کرده و در آن از vite به عنوان bundler استفاده می کند.

تا درودی دیگر بدرود :)