Vite چیست؟ vite.js ابزار جدیدی برای ساخت وب اپلیکیشن‌های سریع

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

Vite JS چیست؟

Vite JS که توسط Evan You ایجاد شده است، یک محیط توسعه دهنده بدون باندلر برای Vue.js (و دیگر فریمورک ها مثل React) است. تجربه توسعه front-end یک برنامه را سرعت می بخشد. Vite کد شما را از طریق وارد کردن ماژول ES بومی در طول توسعه ارائه می‌کند و به شما این امکان را می‌دهد که کامپوننت های تک فایلی Vue.js را بدون نیاز به باندل کردن آنها ایجاد کنید.

Vite با در نظر گرفتن Vue 3 ایجاد شده است، اما با فریمورک های دیگری مانند React نیز استفاده شود، که ما در مقاله CRA و Vite.js در React بررسی کرده ایم.

Vite JS یک ابزار توسعه دهنده frontend جدید است که سبک تر، سریع تر و یکپارچه است که توسعه برنامه های وب مدرن ارائه می دهد. Vite JS عمدتاً برای راه‌اندازی یک محیط توسعه برای فریمورک‌های مختلف مانند React و Vue و حتی برای یک برنامه جاوا اسکریپت Vanilla با سرور توسعه‌دهنده و بارگذاری مجدد hot تنها با دنبال کردن سه دستور استفاده می‌شود.

Vite پلی بین Twig/Craft CMS و نسل بعدی ابزار ساخت فرانت اند Vite.js است. Vite امکان جایگزینی Hot Module (HMR) جاوا اسکریپت، CSS و Twig را (حتی از طریق خطا) در طول توسعه و production builds بهینه شده می‌دهد. Vite تگ های <script> و <link> مورد نیاز را ایجاد می کند تا جاوا اسکریپت همزمان و ناهمزمان و بارگذاری CSS را در خود جای دهد. Vite همچنین دارای یک لایه caching است که برای افزایش عملکرد است.

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

همانطور که قبلاً گفته شد، Vite یک ابزار ساخت است که تجربه توسعه front-end را افزایش می دهد. این به شما امکان می دهد یک محیط توسعه را برای فریمورک های Vue، TezJS و React پیکربندی کنید.

همچنین، با استفاده از Vite JS، می‌توانید یک اپلیکیشن تک صفحه‌ای فوق سریع توسعه دهید و آن را با دیگر بک اندها ادغام کنید. علاوه بر این، از رندر سمت سرور (SSR) نیز پشتیبانی می کند.

Vite همچنین پشتیبانی داخلی برای:

• JSX و TSX
• تایپ اسکریپت
• assets های استاتیک مانند تصاویر و فایل های JSON
• وارد کردن فایل های CSS و فایل های پیش پردازنده CSS مانند scss. و less.

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

Vite از ابزارهایی مانند Svelte (که در آن فریمورک اساساً کامپایل می شود) و Snowpack پیروی می کند که از ویژگی های جاوا اسکریپت مدرن (مانند ماژول های ES) برای ارائه یک تجربه برنامه نویس یکپارچه، روان تر و سریع تر بدون پیکربندی و حداقل پکیج نصب شده استفاده می کنند. . برای کار بر روی برنامه خود، کاری که باید انجام دهید این است که Vite را به همراه یک یا دو افزونه بر روی سیستم خود نصب کنید. سپس باید پیکربندی را تنها در چند مرحله انجام دهید.

Vite یک محیط توسعه دهنده مدرن است که با ارائه ماژول های بومی ES مرورگر، نیاز به باندل کردن را از بین می برد. این شامل فایل های شروع (template) برای فریمورک های مختلف و جاوا اسکریپت، و همچنین پشتیبانی از TypeScript، JSX، و Sass است (البته شما نیاز به نصب یک وابستگی برای Sass دارید).

Vite بسیار سریع است زیرا از ماژول های بومی ES استفاده می کند و نیازی به بازسازی کل بسته نرم افزاری در صورت ایجاد هرگونه تغییر ندارد. و به همین دلیل، به روز رسانی HMR بدون در نظر گرفتن اندازه برنامه شما همیشه سریع است. Vite با یک دستور ساخت از پیش پیکربندی شده ارائه می‌شود که سرعت را هنگام باندل شدن برای حالت production بهینه می‌کند.

Vite نه تنها سریع است، بلکه از HMR - Hot Module Replacement نیز پشتیبانی می کند (به این معنی که می توانید در حین کار کد بازخوانی را در مرورگر مشاهده کنید)، و می توانید از آن برای تولید یک نسخه کوچک شده از پروژه خود برای استقرار استفاده کنید.

با استفاده از Vite، می‌توانید بدون نیاز به سرمایه‌گذاری در Vue CLI یا Create React، که هر دو هر چیزی را که نیاز دارید، به سرعت با یک پروژه Vue یا React شروع کنید. این باعث می‌شود که آن را برای نمونه‌سازی سریع و پروژه‌های کوچک انتخاب کنید، اما هیچ چیز مانع از استفاده از آن در پروژه‌های بزرگتر نمی‌شود.

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

اکنون که می دانیم Vite چیست و چگونه کار می کند، ممکن است تعجب کنید که چرا باید از Vite استفاده کنید.

دلایل زیادی وجود دارد که چرا باید از Vite برای پروژه خود استفاده کنید. بیایید نگاهی کوتاه به برخی از آنها بیندازیم.

کارایی

قبل از building با Vite's ESbuild آن را 10 تا 100 برابر سریع‌تر از استفاده از هر باندلر JS دیگری می‌کند. این به این دلیل است که به بهبود سرعت صفحه و تبدیل ماژول های CommonJS / UMD به ESM کمک می کند.

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

تعویض ماژول داغ (HMR)

Vite از عملکردهای HMR برای پیگیری تغییرات در برنامه شما بدون بارگیری مجدد صفحه کامل استفاده می کند. با HMR API، مرورگر فقط بخش اصلاح شده صفحه را بارگیری می کند و همچنان وضعیت برنامه را حفظ می کند.

نیازی به پیکربندی دستی API HMR در برنامه شما نیست. در حین نصب برنامه به طور خودکار به پروژه شما اضافه می شود. با عملکرد HMR، می‌توانید برنامه‌های سبک‌تر و سریع‌تری را بدون توجه به تعداد ماژول‌ها یا اندازه برنامه‌تان طراحی کنید.

گزینه های پیکربندی

Vite به شما اجازه می دهد تا با گسترش تنظیمات پیش فرض با vite.config.js یا vite.config.ts، کنترل بیشتری بر پیکربندی پروژه خود داشته باشید. اینها در دایرکتوری ریشه اصلی پروژه قرار دارند.

همچنین می توانید فایل های پیکربندی مختلفی را با گزینه config CLI-- مانند زیر مشخص کنید:

vite --config my-config.js

برای آشنایی با آپولو کلاینت در ری اکت و گراف کیو ال این مقاله را بررسی کنید.

Vite Frontend چیست؟

Vite.JS نسل بعدی ابزار frontend است که ارائه می دهد:

1. شروع فوری سرور
2. APIهای کاملاً تایپ شده
3. رابط پلاگین گلوبال
4. حالت production بهینه شده
5. ویژگی های غنی
6. HMR فوق سریع

آیا Vite JS یک فریمورک است؟

بسیاری از توسعه دهندگان در دوراهی هستند که Vite را به عنوان یک فریمورک یا ابزار در نظر بگیرند. بنابراین، اجازه دهید این دیدگاه را از بین ببرم که Vite یک ابزار توسعه دهنده frontend است که از هر فریم ورک فرانت اند پشتیبانی می کند، با قالب های پشتیبانی شده برای Vue، TezJS، React، Preact، Lit Element، Svelte و vanilla JavaScript. با این حال، Vite تنها مختص Vue نیست.

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

ری اکت کوئری چیست؟ بررسی همراه با مثال

تزریق وابستگی در ری اکت

NPM Vite چیست؟

اگر می خواهید Vite را روی سیستم خود اجرا کنید، به  Node js روی سیستم خود نیاز دارید.

NPM مخفف Node Package Manager برای Node.js است. هر پکیج در فایل هایی به نام پکیج تعریف می شود. این مدیریت پکیج پیش‌فرض برای زمان اجرا جاوا اسکریپت Node.js است. بنابراین، Vite از NPM برای توسعه یک برنامه با دستور زیر استفاده می کند:

#If using NPM

$ npm init vite-app <project-name>

$ cd <project-name>

$ npm install

$ npm run dev

آیا می دانید، راه اندازی Vite یک فرآیند واقعا سریعتر و بدون دردسر است؟

شما فقط به نسخه Node >= 12.0.0 نیاز دارید

سپس ترمینال را باز کنید تا کد زیر را بنویسید:

npm init vite@latest

سپس، سه مرحله را در اینجا دنبال کنید:

1. یک پروژه ایجاد کنید
2. یک فریمورک را انتخاب کنید (React، Vue، Preact، Lit، Svelte، Vanilla JS)
3. TypeScript یا جاوا اسکریپت خالص

و تمام همین قدر ساده.

اکنون به پوشه پروژه خود بروید با:

cd <YOUR_PROJECT_NAME>

وابستگی ها را نصب کنید:

npm install

و سرور توسعه را راه اندازی کنید:

npm run dev

در ادامه آنچه اتفاق می‌افتد این است:

فقط در کمتر از 0.3 ثانیه آماده می شود.

فقط برای مقایسه، همان برنامه ساخته شده با VueCLI + Webpack در ابتدا 10 ثانیه طول می کشد. این باعث می شود که 39 برابر سریعتر شود!

همچنین، بارگذاری مجدد ماژول hot - فوری است.

در ابتدا، webpack حدود 2 تا 3 ثانیه و تا 5 ثانیه برای برنامه های عظیم طول می کشد.

RTK Query چیست؟ همراه با مثال در ری اکت

چرا Vite JS سریع است؟

در واقع، Vite بر دو روند جالب بنا شده است. اولین مورد، جاوا اسکریپت مدرن است که به طور گسترده ای پشتیبانی می شود. علاوه بر این، ماژول‌های Native ES اکنون بیش از 92 درصد پشتیبانی گلوبال دارند و این تعداد تنها زمانی افزایش می‌یابد که مرورگرهای Lexi مانند IE11 به سرعت منسوخ شوند.

در حالی که در مورد دومین نکته مهم صحبت می کنیم - کامپایلرهای داده جاوا اسکریپت به صورت کامپایل به زبان native نوشته می شوند. Esbuild (نوشته شده با Go) و swc (نوشته شده با Rust) دو نمونه برجسته هستند. با این حال، هر دو ابزار به طور قابل توجهی سریعتر از ابزارهای مبتنی بر جاوا اسکریپت هستند. بسته به ماهیت کار و تعداد هسته های CPU استفاده شده، می تواند تا صد برابر سریعتر باشد.

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

آیا Vite JS سریعتر از Webpack است؟

Vite یک ابزار توسعه دهنده front-end است که نسل بعدی است که هدف آن بهبود تجربه توسعه دهنده وب پک در هنگام توسعه برنامه های جاوا اسکریپت است.

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

• ماژول های وابستگی
• ماژول های کاربردی

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

ماژول های برنامه ماژول هایی هستند که شما برای برنامه خود توسعه می دهید و اغلب از پسوندهای خاص کتابخانه مانند فایل های jsx، .vue یا scss. استفاده می کنند.

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

Vite ماژول های برنامه شما را زمانی که برنامه شما درخواست کند تغییر داده و ارائه می دهد.

به همین دلیل، Vite می تواند ساخت توسعه شما را سریعتر از Webpack پردازش کند. با گسترش برنامه شما، مدت زمانی که برای پردازش ساخت توسعه شما نیاز است به تدریج افزایش می یابد.

آیا Vite JS شبیه Webpack است؟

عملکرد اصلی Vite مشابه webpack + webapck-dev-server با برخی بهبودهای اصلی در تجربه توسعه دهنده است، مانند:

1. صرف نظر از اندازه برنامه، زمان کمتری را برای شروع برنامه خود صرف می کنید
2. HMR فوری، صرف نظر از اندازه برنامه
3. گردآوری بر اساس تقاضا
4. پیکربندی صفر برای چندین پیش پردازنده خارج از جعبه
5. تایپ اسکریپت قدرتمند Esbuild / jsx (فوق العاده سریع)

محبوب ترین هوک های ری اکت

آیا Vite JS جایگزین Webpack می شود؟

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

چند ویژگی/قابلیت وجود دارد که برخی از برنامه‌های Webpack  موجود به آن‌ها تکیه می‌کنند که Vite ارائه نمی‌کند، اما این قابلیت‌ها طولانی هستند و فقط برای چند کاربر قدرتمند که تنظیمات سفارشی Webpack را می‌نویسند، مورد نیاز هستند.

برای بررسی تفاوت بین Vite.js و Webpack می توانید این مقاله را مطالعه کنید.

آیا Vite بهتر از Vue CLI است؟

Vue CLI یک ابزار ضروری برای پیکربندی سریع یک پروژه مبتنی بر Vue با ابزارهای استاندارد ساخت و تنظیمات بهترین عمل است. یادآوری این نکته ضروری است که Vue CLI بر روی Webpack ساخته شده است، به این معنی که هم سرور توسعه دهنده و هم عملکرد و عملکرد ساخت، ابر مجموعه های Webpack خواهند بود.

از سوی دیگر، Vite نیز یک ابزار ساخت است که دارای پایه های اولیه پروژه و یک سرور توسعه دهنده شبیه به Vue CLI است. Vite مبتنی بر Webpack نیست و در عوض سرور توسعه مخصوص به خود را دارد که از ماژول های بومی ES در مرورگر استفاده می کند. به دلیل این معماری، سرعت آن مرتباً سریعتر از سرور توسعه Webpack است. Vite از Rollup برای ساخت استفاده می کند که سریعتر نیز هست.

آیا Vite JS برای پروژه های بزرگ مناسب است؟

برای نمونه‌سازی برنامه‌های کاربردی و پروژه‌های بزرگ‌تر که وابستگی‌های زیادی در آن‌ها داریم، مناسب است، پروژه باید خیلی سریع به تغییرات واکنش نشان دهد. در مقابل، در مورد Webpack، ممکن است مشکل باشد. با این حال، Vite جایگزین کاملی برای Webpack نیست.

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

Vite از esbuild استفاده می کند اما از Rollup برای پیش باندل شدن وابسته استفاده نمی کند. این منجر به افزایش سرعت قابل توجهی از نظر راه‌اندازی سرد سرور و باندل مجدد عدم اعتبار وابستگی می‌شود.

آیا Vite از Esbuild استفاده می کند؟

Vite از esbuild برای تبدیل TypeScript به جاوا اسکریپت استفاده می کند که حدود 20 تا 30 برابر سریعتر از vanilla tsc است و به روز رسانی HMR کمتر از 50 میلی ثانیه طول می کشد تا در مرورگر ظاهر شود.

نتیجه

Vite.js یک ابزار ساخت باورنکردنی است که نسبتاً جدید است. ویژگی‌های منحصربه‌فرد، تجربه توسعه‌دهنده سریع‌تر و پشتیبانی از زبان‌های مختلف قبلاً در بین توسعه‌دهندگان بسیار محبوب بوده است. وقتی می خواهیم از استفاده از یک فریمورک اجتناب کنیم، اما به اسکریپت ها و سبک های کوچک شده نیاز داریم، بسیار خوب است.

نظر شما و تجربه شما از Vite چیست؟ و در چه فریمورکی از آن استفاده می کنید؟ برای ما در قسمت نظرات بنویسید.