ابزار Vite چیست ؟ هرچیزی که باید درمورد vite در فرانت اند بدونیم!
ابزار Vite در فِرانت اِند به ما در جهت ساخت اپیکیشن های تحت وب ( وبسایت ها ) کمک میکنه و مزیتش این هست که این کار رو خیلی ساده و بدون دردسر های همیشگی برای ما انجام میده.
اگه Front-End Developer باشید، حتما به تازگی اسم Vite به گوشتون خورده، تو این مقاله میخوایم 0 تا 100 ابزار Vite در فرانت اند رو بررسی کنیم و ببینیم چه مزایا و معایبی داره ..
با فِرانت اِندی همراه باشید تا به این سوال پاسخ بدیم که Vite چیست .. 🙂
ابزار Vite ، نسل جدید ابزار فِرانت اِند
قضیه چیه ؟!
تو چند سال اخیر، سر و کله ابزار های قدرتمند و جالبی تو حوزه فِرانت اِند برای بهبود تجربه کاربری توسعه دهنده ها ( developers ) پیدا شده.
این ابزار ها کمک میکنن کار ما آسون تر و سریعتر انجام بشه ..
یکی از این ابزار ها ، ابزار Vite هست 🙂
حالا بریم ببینیم Vite چیست و چه تفاوتی با رقبای خودش داره ..
8 میلیون دانلود هفتگی در npm !
ابزار Vite چیست ؟
ابزار Vite در فرانت اند یکی از ابزار های فرانت اند هست که به توسعه دهنده های فِرانت اِند کمک میکنه کارهای خودشون رو راحت تر و سریعتر انجام بدن.
ابزار Vite ( ویت ) رو به عنوان یک Build Tool ( ابزار ساخت ) میتونیم به حساب بیاریم.
سازنده ابزار Vite ، آقای Even هست که فریمورک Vue.js رو هم ساخته. ( پس میشه به این ابزار نوظهور اعتماد کرد )
از ابزار Vite در فرانت اند میتونیم برای توسعه اپیکیشن هایی که با جاوااسکریپت یا تایپ اسکریپت ساخته میشن، استفاده کرد.
بریم ببینیم ویژگی های اصلی ابزار Vite چیه ..
کامپایل سریع با ابزار Vite
ابزار Vite به دلیل استفاده از API های مدرن و جدید مرورگر و خود ES ( اکما )، در سریعترین زمان ممکن کد مارو کامپایل میکنه و این فوق العادس!
این ویژگی کمک میکنه زمان لازم برای Build ( ساخت ) اپیکیشن به شدت کاهش پیدا کنه.
خود Vite یک سرور داخلی قدرتمند داره که اجازه میده تغییراتی که ما ( به عنوان یک developer ) لحاظ میکنیم خیلی سریع و بصورت real-time و بدون رفرش شدن صفحه مشاهده کنیم.
بارگذاری تنبل ماژول ها ( Modules Lazy Loading )
ابزار Vite در فِرانت اِند ، بصورت پیشفرض قابلیت بارگذاری تنبل ماژول هارو پیاده سازی میکنه.
این فوق العادس ! 🙂
یعنی هر ماژول، فقط زمانیکه بهش احتیاج داریم بارگذاری میشه. این موضوع کمک میکنه حجم Boundle های ساخته شده کم بشه و در نهایت اپیکیشن ما عملکرد خیلی بهتری از خودش نشون بده.
ویژگی بارگذاری تنبل در ابزار Vite کمک میکنه که اپیکیشن ما خیلی سریعتر لود بشه و کاربر سریعتر صفحه رو ببینه.
تقسیم کد و حذف کد های بلا استفاده در ابزار Vite
یکی از بهترین تکنیک های بهینه سازی اپیکیشن های تحت وب، تکنیک تقسیم کد ( Code Splitting ) هست. این تکنیک با کاهش اندازه کد به بهبود Performance اپیکیشن ما کمک میکنه.
موضوع بعدی بحث Tree-shaking به معنی حذف کد های بلا استفاده هست. درواقع ابزار Vite تشخیص میده که چه کد هایی بلااستفاده هستن و ما نیازی بهشون نداریم. سپس با حذف این کد ها، به کاهش حجم کد و بهینگی اپیکیشن ما کمک میکنه.
درواقع ابزار Vite میخواد مطمئن بشه که کاربر های ما فقط کدهای مورد نیاز همون صفحه رو دانلود میکنن و کد های اضافه ای دانلود نمیکنن!
سرور داخلی ابزار Vite
ابزار Vite یک سرور داخلی داره که این سرور داخلی برای بارگذاری مجدد سریع ( fast reloading ) و hot module replacement بهینه شده.
سرور داخلی Vite توسعه و تست اپیکیشن رو خیلی ساده و آسون میکنه و به Developer اجازه میده تغییرات اعمال شده خودش رو بصورت آنی ( real-time ) و بدون رفرش شدن صفحه ببینه.
مزایای Vite چیست ؟
با به اینجای کار درمورد ویژگی های اصلی و کلیدی ابزار Vite در فرانت اند صحبت کردیم.
اما مهمترین مزیت Vite نسبت به رقبای خودش چیست ؟
+ بهبود تجربه توسعه دهندگان فرانت اند
ابزار Vite با رویکرد ها و ویژگی های قدرتمندی که ارائه کرده، به Front-End Developer ها تجربه توسعه خیلی بهتری میده.
خیلی خلاصه بخوایم بگیم، ابزار Vite خیلی از مسائل رو خودش حل کرده و یکسری ویژگی جذاب ارائه کرده که باعث شده توسعه فِرانت برای ما خیلی ساده تر، سریعتر و لذت بخش تر باشه!
+ زمان Build خیلی کمتر !
یکی از مهمترین مزیت های ابزار Vite ، زمان Build خیلی کم نسبت به رقبای خودش هست. یعنی ساخت ( Build ) اپیکیشن ما در مدت زمان خیلی کمتری انجام میشه.
این یعنی ما زمان کمتری منتظر Build اپیکیشن خواهیم موند.
+ پشتیبانی از استاندارد های وب مدرن
همونطور که ابتدای همین مقاله هم اشاره کردیم، ابزار Vite از جدیدترین API های مرورگر و ES ( اکما اسکریپت ) استفاده میکنه و این برای توسعه دهنده هایی که به دمبال استفاده از بروزترین استاندارد های وب هستن، عالیه!
معایب Vite در فرانت اند چیست ؟
هر ابزار،کتابخانه یا فریمورک یکسری مزیت و معایب داره. ابزار Vite هم از این قاعده مستثنی نیست و معایبی داره.
بطور کل 2 عیب میشه برای ابزار Vite در فرانت اند مطرح کرد که هر 2 قابل حل و چشم پوشی هستن :
+ جامعه آماری ضعیف Vite
همونطور که گفتیم Vite یک ابزار نوظهور و جدید هست و فعلا جامعه آماری ضعیفی داره. اما مطمئن باشید که روز به روز به جامعه آماری این ابزار افزوده میشه و آموزش ها، پرسش و پاسخ ها و داکیومنت های بهتری برای این ابزار منتشر میشه.
در حال حاضر بیش از 8 میلیون نفر این ابزار رو از npm دانلود میکنن و این آمار هر روز، بیشتر از دیروز میشه.
+ سازگاری ضعیف مرورگر با Vite
ما گفتیم که Vite از جدیدترین و بروزترین API های مرورگر ها داره استفاده میکنه و این خیلی عالیه.
اما معایبی هم داره.
اگه کاربر های اپیکیشن شما از مرورگر های قدیمی استفاده کنن، دچار مشکل میشید.
ابزار Vite در مقایسه با ابزار Create React App معروف و قدیمی !
اگه با کتابخانه ری اکت کار کرده باشین، حتما اسم ابزار قدیمی و معروف Create-react-app رو شنیدید.
Create React App یکی از معروفترین ابزار های Front-End هست که به ما کمک میکنه به کمک کتابخانه ریکت، اپیکیشن های تحت وب بسازیم.
به ابزار create-react-app ، ابزار CRA هم میگیم.
ابزار Vite و ابزار CRA شباهت های خیلی زیادی با همدیگه دارن اما تفاوت هایی هم باهمدیگه دارن.
بریم ببینیم تفاوت Vite و Cra جیست ؟
تفاوت اول ( Build System )
یکی از بزرگترین تفاوت های Vite و Cra در گرفتن نسخه Build پروژه یا همون خروجی پروژه هست.
درحالیکه CRA از وب پک ( webpack ) برای کامپایل و بهینه سازی کد استفاده میکنه، ابزار Vite از ماژول های بومی خود ES ( اکما ) برای اینکار استفاده میکنه.
همین موضوع باعث میشه Build پروژه در مدت زمان کمتر و اندازه کوچکتر ساخته بشه.
تفاوت دوم ( Performance )
ما گفتیم که Vite از یک سیستم تقسیم کد ( Code Spliting ) و حذف کد های بلااستفاده، بهره میبره. همین موضوع کمک میکنه بارگذاری صفحه برای کاربر سریعتر انجام بشه.
در نهایت اپیکیشن ها Performance بهتری خواهد داشت.
تفاوت سوم ( Tooling )
برای ابزار Vite ابزار ها و کانفیگ های خیلی زیادی موجود هست و کاربران میتونن کانفیگ مدنظر خودشون رو روی Vite اعمال کنن.
جدای از این، ابزار Vite قابلیت شخصی سازی خیلی زیادی داره و بر اساس نیاز Developer قابلیت شخصی سازی داره.
تفاوت چهارم ( Development experience )
همونطور که اشاره کردیم، Vite یک سرور داخلی قدرتمند داره که اجازه میده تغییرات خومون رو بصورت real-time ببینیم.
در مقابل ابزار CRA خیلی کند تره و نیاز به ریلود کامل صفحه داره تا بتونیم تغییرات جدید رو در صفحه ببینیم.
تفاوت پنجم ( Learning curve )
همونطور که اشاره شد، Vite قابلیت شخصی سازی و کانفیگ خیلی بیشتری نسبت به CRA داره. به همین دلیل ممکنه زمان بیشتری برای یادگیری Vite صرف کنیم.
تفاوت ششم ( Ecosystem compatibility )
طبیعتا ابزار CRA به دلیل قدیمی بودن، جامعه آماری و ابزار های خوبی در اختیار داره. در عوض Vite یک ابزار جدید هست که جامعه آماری کمتری داره اما در حال رشد هست.
چطور اپیکیشن خودمون رو از CRA به Vite منتقل کنیم ؟
با این همه مزیتی که برای ابزار Vite وجود داره و خبر منسوخ شدن cra ، اصلا عجیب نیست که بخوایم از CRA به Vite مهاجرت کنیم!
اگه اپیکیشن خودمون رو با create-react-app ساختیم، خیلی ساده میتونیم به Vite منتقلش کنیم ..
مراحل این مهاجرت به شرح زیر هست :
ساخت یک اپیکیشن ری اکتی با Vite
تو مرحله اول باید یک پروژه ری اکتی به کمک ابزار Vite بسازیم.
انتقال کد های پروژه CRA به پروژه جدید که با Vite ساخته شده
تو مرحله دوم باید کد های پروژه خودمون رو به پروژه جدید که با Vite ساخته شده، منتقل کنیم. ( کپی کردن همه کامپوننت ها، صفحات، استایل ها و .. )
بروزرسانی Dependencies ها
ابزار Vite وابستگی های متفاوتی نسبت به CRA داره. درواقع باید به فایل package.json مراجعه کنیم و برخی dependencies هارو حذف یا اضافه کنیم.
تنظیم enviroment ها
ابزار Vite از سیستم Build متفاوتی نسبت به Cra استفاده میکنه. بنابراین ما باید env های پروژه خودمون رو مطابق vite تنظیم کنیم.
تست کد
پس از انجام تمام مراحل بالا، ما باید کد و پروژه خودمون رو تست کنیم تا مطمئن بشیم که همه چیز به خوبی داره کار میکنه 🙂
سازنده ابزار Vite کیست ؟
ابزار Vite رو آقای ایوان یو ( Evan You ) سازنده ی فریمورک Vue.js ساخته. با توجه به اینکه سازنده Vite شخص با مهارت و با تجربه ای هست، میشه با خیال راحت رفت سراغ Vite !
جمع بندی
ابزار Vite یکی از بهترین ابزار های مدرن فرانت اند هست که نسبت به رقبای خودش برتری های خیلی زیادی داره. مواردی مثل سرعت بالاتر، Build بهینه تر، تقسیم کد، حذف کد های اضافی و ..
ما به عنوان یک Front-End Developer تجربه کاربری خیلی بهتری هنگام کار با Vite بدست میاریم.
ابزار Vite بر اساس آخرین و مدرن ترین API های مرورگر و ES ( اکما ) ساخته شده و استفاده ازش باعث میشه هم خودمون تجربه کد زدن بهتری داشته باشیم، هم کاربر نهایی با یک اپیکیشن بهینه و سریع روبرو بشن.
خلاصه بگیم ..
هرچه زودتر CRA رو بزارید کنار و بیاید سراغ Vite 🙂
در پاسخ به این سوال که Vite چیست میشه گفت که ابزار Vite یک ابزار فرانت اند برای ساخت اپیکیشن های تحت وب سریع و بهینه هست.
همچنین ابزار Vite یک سرور داخلی سریع و بهینه داره که کمک میکنه فرایند توسعه و استفاده از اپیکیشن سریعتر و بهینه تر انجام بشه.
ابزار Vite از ماژول های بومی و بهینه ی ES و خود مرورگر استفاده میکنه تا کد مارو بهینه و کامپایل کنه.
همچنین کمک میکنه حجم باندل ( boundle ) ها کوچکتر بشه که در نهایت سرعت بارگذاری صفحه برای کاربر سریعتر خواهد بود.
بله، ابزار Vite طوری ساخته شده که با تمامی کتابخانه ها و فریمورک های مدرن جاوااسکریپتی سازگاری کامل داشته باشه.
به کمک Vite میتونیم اپیکیشن های ری اکتی ، Vue یا انگولار بسازیم.
دیدگاهتان را بنویسید