در مقالات گذشته وب سایت آموزش برنامه نویسی صعود به معرفی و بررسی زبان برنامه نویسی جاوا اسکریپت و فریم ورک های محبوب آن مانند react.js و vue.js و دیگر ابزار های محبوب آن پرداختیم، اما در این مقاله کارشناسان گروه آموزشی صعود قصد دارند تا یکی دیگر از ابزار های مهم و کاربردی که از آن به عنوان نسل جدید ابزار های Frontend  یاد میکنند به نام vite  یا vite.js را برای شما معرفی و به بررسی نکات مهم آن بپردازند. پس اگر قصد دارید تا همه چیز را در رابطه با موضوع Vite چیست؟ vite.js نسل جدید ابزار های Front-End بدانید در این مقاله با ما همراه شوید.

Vite چیست؟ vite.js نسل جدید ابزار های Front-End

اگر به دنبال افزایش تجربه خود در توسعه front end هستید، در این مسیر تنها نیستید. با همین هدف، سازنده Vue، Evan You، ابزار جدیدی به نام Vite.js را ارائه کرد. Evan You آن را نسل بعدی ابزارهای front end می نامد. Vite یا Vite.js یک ابزار ساخت از یک سرور توسعه دهنده تشکیل شده است که کد شما را برای تولید بسته بندی می کند.

Vite.js به توسعه دهندگان این امکان را می دهد که یک محیط توسعه برای فریم ورک هایی مانند Vue و React و حتی برای برنامه Vanilla JavaScript با یک سرور توسعه دهنده راه اندازی کنند. علاوه بر این، به تیم توسعه اجازه می دهد تا تنها در سه دستور بارگذاری مجدد کنند. Vite از Rollup.js به صورت داخلی برای بسته‌بندی پشتیبانی می‌کند.

Vite.js یک ابزار ساخت

Vite.js یک ابزار ساخت سریع و صاحب نظر را با API بسیار قابل تنظیم با استفاده از افزونه ها ارائه می دهد. علاوه بر این، Vite.js از بسیاری از کتابخانه‌های فرانت‌اند محبوب مانند Preact، React، Vue.js و Vanilla JavaScript از طریق قالب‌ها پشتیبانی می‌کند.

همانطور که می دانیم، Radixweb یک شرکت توسعه نرم افزار سفارشی نسل بعدی است. توسعه دهندگان فرانت اند Radixweb از این نسل جدید ابزار با کارایی بالا بسیار هیجان زده هستند.

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

ما(گروه آموزشی صعود) در این مقاله به موارد زیر نگاهی جامع می اندازیم:

1. Vite JS چیست؟ و چرا باید به آن اهمیت دهید؟
2. Vite JS چگونه کار می کند؟
3. مزایای Vite JS
4. ویژگی های Vite/Vite 2.0
5. چگونه با استفاده از Vite.js یک برنامه بسازیم؟
6. چرا از Vite JS استفاده کنیم؟
7. جمع بندی

Vite JS چیست؟ و چرا باید به آن اهمیت دهید؟

در رقابت برای تبدیل شدن به ابزار نسل بعدی، Vite بازی را رهبری می کند.

در واقع، Vite برای Vue Single File Components (SFC) به عنوان یک سرور توسعه توسعه داده شد. اما با گذشت زمان، Vite تکامل یافته و به یک سرور توسعه جاوا اسکریپت بدون بسته تبدیل شده است. اکنون Vite از اکثر فریم ورک های وب پشتیبانی می کند. علاوه بر این، گردش کار سریع‌تر، نازک‌تر و روان‌تر را برای توسعه برنامه‌های کاربردی وب مدرن ارائه می‌دهد. به طور خلاصه، Vite شبیه Vue CLI است اما لاغرتر و سریعتر است.

نکته: جالب است که بدانید نام "Vite" از کلمه فرانسوی "Fast" گرفته شده است که "Vit" تلفظ می شود.

به‌عنوان یک توسعه‌دهنده، هنگام توسعه یک برنامه وب، ممکن است هنگام ایجاد تغییرات با زمان زیادی برای بارگذاری برنامه مواجه شده باشید. Vite سرعت حلقه بازخورد را در طول (ESBuild، موتور با کارایی بالا در زیر کاپوت Vite.)

در اینجا، Vite از کد منبع بر روی ESM بومی استفاده می کند. و با استفاده از ESBuild و ESM در زیر هود، Vite سرعت راه اندازی را 10-100 برابر افزایش می دهد. با این حال، مرورگر کد منبع را بسته بندی می کند. از این رو، Vite تنها زمانی کد منبع را ارائه می دهد و آن را تغییر می دهد که مرورگر آن را درخواست کند. بنابراین، ذخیره کد تغییر یافته و مشاهده تغییرات منعکس شده در مرورگر یک فرآیند سریع است. توسعه افزایش می دهد و آن را فوق العاده سریع می کند. به طور رسمی، Vite.js به همراه Svelte و Vue تبدیل شده است. بنابراین، در میان جامعه توسعه دهندگان محبوبیت پیدا کرده است و به رقیبی سرسخت برای سایر فریم ورک های فرانت اند معروف مانند Lit و React تبدیل شده است. آخرین نسخه Vite.js یک محیط جاوا اسکریپت بدون بسته‌بندی ویژگی‌های جدید بسیاری را ارائه می‌دهد. Vite 2.0 که در 16 فوریه 2021 منتشر شد، یک معماری کاملاً بازطراحی شده، پشتیبانی درجه یک CSS، یک سیستم پلاگین جدید و بسیاری موارد دیگر را ارائه می دهد. بنابراین، اگر فرصتی برای استفاده از Vite.js ندارید، شما به عنوان یک شرکت توسعه‌دهنده پیشرو، می‌توانید از Vite JS برای پروژه بعدی خود استفاده کنید.

Vite JS چگونه کار می کند؟

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

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

مستندات Vite JS بیان می‌کند که نحو واردات ES مستقیماً در کد منبع ما به مرورگر ارائه می‌شود. مرورگر پشتیبانی شده <script module> بومی آنها را به صورت خودکار تجزیه می کند و درخواست های HTTP برای هر وارد کردن ایجاد می کند. سرور توسعه دهنده درخواست های HTTP را از مرورگر دریافت می کند و هرگونه تغییر کد لازم را اجرا می کند. این سرعت را افزایش می دهد و سرور Vite را به طرز دیوانه کننده ای سریع می کند. در اینجا، ساعت شروع سرد در حدود 140 میلی ثانیه در مقایسه با Vue-CLI 1900 میلی ثانیه است.

Vite Performance

پیش‌بسته‌سازی Vite با ESbuild سرعت بارگذاری صفحه را 10 تا 100 برابر سریع‌تر از هر باندلر JS دیگری افزایش می‌دهد. در اینجا، سرور توسعه دهنده Vite بلافاصله شروع به کار می کند و کد تغییر یافته مرورگر به لطف جایگزینی Hot Module به سرعت منعکس می شود. علاوه بر این، می‌توانید اطلاعات بیشتری در مورد عملکرد و تجربه توسعه‌دهنده در راهنمای Why Vite بخوانید.

مزایای ViteJS  

تا به این قسمت از مقاله ی Vite چیست؟ vite.js نسل جدید ابزار های Front-End متوجه شدیم که Vite JS چیست؟ و چگونه کار می کند؟، بیایید کمی عمیق تر برویم تا مزایایی را که برای بهبود تجربه کلی توسعه دهنده ارائه می دهد، بررسی کنیم.

در ادامه این بخش به معرفی و بررسی برخی از مهم ترین مزایای vite.js میپردازیم:

1- Hot Module Replacement (HMR)

یک ویژگی شگفت‌انگیز – جایگزینی Hot Module در بسته‌های جاوا اسکریپت، کد منبع را در مرورگر بدون تازه‌سازی مرورگر تغییر می‌دهد. با استفاده از ابزار Vite JS، برای به‌روزرسانی محتوا، نیازی به بارگیری مجدد مرورگر ندارید، زیرا هر تغییری با یک اثر فوری در مرورگر منعکس می‌شود. جایگزینی ماژول داغ از تعداد کل ماژول ها جدا شده است. این باعث می شود پروژه شما بدون توجه به اندازه برنامه شما به طور مداوم سریعتر شود. در یک نکته ساده تر، سرعت HMR گلوگاه توسعه دهندگان فرانت اند است که از Webpack استفاده می کنند.

2- Bare Module Resolving

مرورگرها هنوز از وارد کردن ماژول خالی پشتیبانی نمی‌کنند که می‌توانید از یک نام بسته مانند import {createApp } از «vue» وارد کنید، زیرا مسیر نسبی به node_modules ما نیست. Vite در فایل‌های جاوا اسکریپت شما به دنبال مشخص‌کننده‌های وارداتی ساده می‌گردد. هنگامی که آنها را پیدا کرد، آنها را بازنویسی می کند و از وضوح ماژول برای یافتن فایل های مربوطه از وابستگی های پروژه شما استفاده می کند. سپس آنها را به عنوان مشخص کننده های ماژول قانونی حل می کند.

3- On-demand Compilation  

همانطور که می دانیم مرورگرها فایل های منبع را برای کامپایل ارسال می کنند و تنها کدهای مورد نیاز یا تغییر یافته روی صفحه کامپایل می شوند. در اینجا، فایل های بدون تغییر یک کد خطای 304 (Not Modified) را برمی گرداند. برخلاف سایر باندلرهای موجود، آنها هر فایلی را که در پروژه شما قرار دارد کامپایل می کنند و قبل از ایجاد هر گونه تغییر، آنها را باندل می کنند. به همین دلیل Vite یک انتخاب مناسب برای پروژه های بزرگ است.

 Configuration Option -4 (گزینه پیکربندی)

اگر می‌خواهید کنترل کامل پروژه خود را داشته باشید، می‌توانید پیکربندی پیش‌فرض را با فایل vite.config.js یا vite.config.ts در پوشه کاری یا پروژه موجود از دایرکتوری ریشه اصلی گسترش دهید. علاوه بر آن، می توانید به صراحت یک فایل پیکربندی را از طریق vite –config my-config.js ذکر کنید. علاوه بر این، می‌توانید با افزودن یک افزونه Rollup برای ساخت و میان‌افزار Koa در فایل پیکربندی، پشتیبانی از تبدیل فایل‌های سفارشی را اضافه کنید.

ویژگی های Vite/Vite JS 2.0

Vite ویژگی‌های زیادی را ارائه می‌دهد که به تجربه توسعه اجازه می‌دهد نرم‌تر، سریع‌تر و ناب‌تر باشد. اگر Vite را برای پروژه بعدی خود انتخاب کنید، در اینجا ویژگی هایی وجود دارد که می توانید از آنها استفاده کنید!

آخرین نسخه Vite – Vite 2.0 بسیاری از ویژگی های دیگر را نیز اضافه می کند که به شرح زیر است:

1- ساخت سریعتر

اگر در مورد آخرین نسخه Vite - Vite 2.0 صحبت کنیم، زمان ساخت سریعتری را با ESbuild ارائه می دهد. در واقع ESBuild یک باندلر است که در Go نوشته شده است. 10-100 برابر سریعتر از هر باندلر دیگری است.

Vite 2.0 از ESbuild برای تبدیل ماژول های CommonJS به ESM برای وابستگی ها استفاده می کند. طبق بیانیه رسمی Vite، Vite 2.0 از ESBuild به جای Rollup استفاده می کند. در نهایت، عملکرد را در زمان ساخت افزایش می دهد. در حال حاضر، ESBuild برای پیش‌باندل کردن وابستگی‌ها استفاده می‌شود.

2- فریم ورک آگنوستیک(Framework-agnostic)

Vite 2.0 دارای یک دیگ بخار با کیفیت بالا برای فریم ورک های مختلف مانند Vue.js، React، Preact و بسیاری دیگر است. همچنین یک دیگ بخار جاوا اسکریپت وانیلی ارائه می دهد. دیگ های دیگر نیز از TypeScript پشتیبانی می کنند. Vite به دلیل ماهیت فریمورک آگنوستیک آن، تجربه ابزارسازی ثابتی را در بین فریمورک ها ارائه می دهد.

3- پشتیبانی CSS بهبود یافته

Vite 2.0 ویژگی‌های جدید CSS مانند تقسیم CSS، تغییر مجدد URL و غیره را ارائه می‌دهد. با این حال، این ویژگی‌ها در خارج از جعبه بدون پیکربندی پشتیبانی می‌شوند. حل‌کننده Vite مسیرهای import@ و url() را در CSS با احترام به نام‌های مستعار و وابستگی‌های npm بهبود می‌بخشد.

4- پشتیبانی تجربی برای SS

Vite در حال حاضر از SSR پشتیبانی می کند. از SSR برای React.js و Vue 3 پشتیبانی می کند. Vite APIها و ساختارهایی را برای بارگیری و به روز رسانی کد منبع مبتنی بر ESM به طور موثر ارائه می دهد. همچنین به طور خودکار وابستگی های سازگار با CommonJS را خارجی می کند.

Vite SSR یک عملکرد بسیار سطح پایین است و هدف تیم ارائه ابزار برای یک ویژگی سطح بالاتر در روزهای آینده است. در ساخت تولید، SSR را می توان به طور کامل از Vite جدا کرد. با همان تنظیمات، می تواند از پیش رندر نیز پشتیبانی کند.

5- سیستم پلاگین جدید

Vite با شناسایی نوع ساخت و دسترسی به تنظیمات و تنظیمات سرور توسعه دهنده، تجربه توسعه دهنده را افزایش می دهد. با بسیاری از پلاگین های Rollup.js سازگار است. سیستم افزونه جدید از مدیریت منحصر به فرد Hot Module Reload استفاده می کند و API را برای افزودن میان افزار به سرور توسعه دهنده ارائه می دهد. سیستم پلاگین سیستم مبتنی بر WMR است. سیستم جدید قابلیت های ویژه Vite را به سیستم پلاگین Rollup اضافه می کند.

سایر ویژگی هایی که می توانید با استفاده از Vite استفاده کنید عبارتند از:

• Vite از فایل های .tsx و .jsx با ESBuild برای ترجمه پشتیبانی می کند
• مدیریت URL دارایی
• دارای پشتیبانی عالی از Post CSS، ماژول های CSS و پیش پردازنده های CSS
• از گزینه های حالت و متغیرهای محیطی پشتیبانی می کند
• پشتیبانی شگفت انگیز از TypeScript، با استفاده از ESBuild برای ترجمه

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

• پیش نیازها
• ما معتقدیم که شما همه چیز برای ایجاد یک برنامه با Vite دارید
• Node.js 10x یا بالاتر
• Yarn / npm 5.2
• دانش اولیه جاوا اسکریپت و نحوه کار فریم ورک ها

بیایید با استفاده از Vite یا Vite 2.0 یک برنامه بسازیم.

اکنون زمان آن فرا رسیده است که با ایجاد یک برنامه کاربردی React بسیار ابتدایی و بدون نیاز به تست درایو اقدام کنید.

از الگوی React برای دیگ بخار Vite استفاده کنید:

yarn @vitejs/app my-react-app --template react-ts را ایجاد کنید.

ساختار پوشه به شرح زیر است:

• بنابراین، اکنون دیگ بخار Vite، TypeScript و React شما آماده خدمت است.
• زمان نصب وابستگی ها با دستور npm i یا yarn فرا رسیده است. پس از اتمام مراحل نصب، می توانید سرور توسعه را با استفاده از دستور yarn dev راه اندازی کنید.
• تادا! اکنون با یک برنامه Vite-drive آماده هستید.

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

مزیت اصلی که یک توسعه دهنده می تواند از آن استفاده کند، تجربه توسعه شگفت انگیز Vite است. سریع کار می‌کند، سریع بارگیری می‌شود و به شما (توسعه‌دهنده) اجازه می‌دهد کار خود را در زمان سریع انجام دهید. علاوه بر این، اکوسیستم پلاگین به شما امکان می دهد بسته به نیاز خود، برنامه خود را از طرق مختلف گسترش دهید. چندین الگوی نظری عملکردهای داخلی بیشتری را ارائه می دهند، مانند Vitesse توسط Anthony Fu از تیم اصلی Vue.

Vite JS برای چه مواردی استفاده می شود؟

با توجه به این موضوع، Vite می تواند از راه های مختلفی برای شما مفید باشد، در ادامه ی این مقاله گروه آموزشی صعود با ارائه یک جدول به مواردی که vite.js در آن ها استفاده می شود اشاره میکنند تا برای شما ملموس شود که vite.js چه کارایی هایی دارد!

نتیجه

به نظر می رسد Vite یک ابزار ساخت بسیار جالب است و هنوز در صنعت جدید است. خوب، این یک ابزار جدید در بازار است و رقابت سختی را برای ابزارهای توسعه دهنده دیگر مانند Snowpack و Parcel ایجاد می کند، که تجربه ابزارسازی را ساده می کند. با این حال، با ارائه ویژگی‌های بسیاری مانند محیط توسعه سریع، تجربه توسعه‌دهنده سریع‌تر، استفاده از ابزار مدرن و پشتیبانی از چند زبان، محبوبیت خود را در توسعه front-end نیز ثابت کرده است. در واقع، Vite در زمان اخیر از Vue CLI پیشی نخواهد گرفت. اگرچه Even گفته است که این راه رو به جلو برای ابزار Vue است. زمان کار سریعتر، تجربه یکپارچه توسعه دهنده و جامعه پر جنب و جوش آن تنها با گذشت زمان رشد می کند. این دلیل محکمی است که باید آن را با Vite امتحان کنید. بنابراین، دفعه بعد که نیاز دارید یک برنامه سریع را در Vue یا React ایجاد کنید، Vite را امتحان کنید.

در این مقاله کارشناسان گروه آموزش برنامه نویسی صعود به معرفی و بررسی ابزار vite یا vite.js پرداختند و همچنین کاربرد vite و مزایای آن را برای شما ارائه دادند. شما میتوانید سوالات، انتقادات و پیشنهادات خود را در رابطه با موضوع Vite چیست؟ vite.js نسل جدید ابزار های Front-End از قسمت نظرات با کارشناسان واحد آموزش وب سایت صعود در میان بگذارید. در صورت تمایل میتوانید صعود را در شبکه های اجتماعی تلگرام و اینستاگرام  دنبال کنید.