Vite به زبان ساده: از نصب تا اجرای پروژه
در سالهای اخیر، اکوسیستم توسعه فرانت اند (Frontend)، انقلابی از ابزارها و فریمورکهای جدید را تجربه کرده است. در میان این ابزارهای مختلف، Vite با لوگوی رعد و برق نمادینش، تازه واردی قدرتمند است که به دلیل عملکرد و سرعت چشمگیر محبوبیت بسیاری در میان توسعه دهندگان پیدا کرده است. این ابزار توسط Evan You معروف، سازنده فریم ورک قابل احترام Vue.js ساخته شده است. هدف Evan از ساخت این ابزار، ارائه تجربهای سریع برای پروژههای مدرن وب است. بهترین ویژگی ViteJS استقلال آن نسبت به پلتفرمهاست، این استقلال باعث میشود که در پروژههای JavaScript و TypeScript قابلیت استفاده داشته باشد.
Vite چیست؟
Vite یک ابزار مدرن Build در حوزه فرانت اند است که بر روی سرعت و سادگی تمرکز دارد. شاید واژه Vite برای شما کمی عجیب باشد، این واژه در اصل فرانسوی و به معنای “سریع” است. معنای نام Vite، عملکرد آن را به طور کامل توصیف میکند، این ابزار به صورت باورنکردنی هم در توسعه (Development) و هم در بخش تولید (Production) فوق العاده سریع است.
Vite، حلال مشکلات ابزارهای قدیمی
ابزارهای سنتی مانند Webpack و Parcel با تمام محبوبیتی که داشتند، معمولا معایبی قابل توجه نیز دامن گیر آنها بودند:
- راه اندازی (Startup) آهسته برای پروژههای بزرگ
- زمان طولانی برای هر بازسازی بعد از تغییر (Rebuild Time)
- پیکربندی سخت برای ابزارهای مدرنتر
ویژگیهای کلیدی Vite
این ابزار مدرن و فوق سریع، ویژگیهای بسیاری دارد که آن را از ابزارهای مشابه دیگر جدا میسازد. بیایید نگاهی به این ویژگیها بیندازیم:
کامپایل سریع و تعویض ماژول داغ (Hot Module Replacement)
ابزار Vite از ماژولهای بومی ES و APIهای مدرن مرورگر شما استفاده میکند تا کدی که میزنید را با کامپایلر سریعش به پرواز در بیاورد و در لحظه آن را به روز رسانی کند. این رویکرد نیاز به Bundler را در زمان توسعه کاهش میدهد که میتواند به صورت گسترده از زمان ساخت و استقرار برنامهها کم کند. سرور داخلی این ابزار برای بارگذاری سریع و جایگزینی ماژول در لحظه بهینه شده و به توسعه دهندگان اجازه میدهد تغییرات اضافه شده را به صورت بلادرنگ و بدون نیاز به رفرش صفحه مشاهده کنند.
بارگذاری تنبل ماژولها (Lazy Loading)
Lazy Loading به تکنیکی گفته میشود که در آن، کدها فقط هنگام نیاز بارگذاری (Load) میشوند. ابزار Vite از این تکنیک برای افزایش سرعت و بهینه سازی عملکرد استفاده میکند و نتیجه آن، کاهش سایز بستههای نرم افزاری (Bundle) و پرفورمنس بهینه است. همچنین تکنیک Lazy Loading باعث کاهش زمان بارگذاری اولیه (Initial Load Time) برای کابران شما میشود.
درخت تکانی و تقسیم کد (Tree-Shaking and Code Splitting)
این دو تکنیک برای بهینه سازی و کاهش سایز کدهای برنامه و در نهایت بهبود عملکرد استفاده میشوند. درخت تکانی (Tree-Shaking) کدهای استفاده نشده در برنامه را حذف میکند و تقسیم کد (Code-Splitting) به شما اجازه میدهد کدهای خود را به قسمتهای کوچک و قابل مدیریت تقسیم کنید. این دو تکنیک در کنار هم کار میکنند تا کاربران شما فقط کدهای مورد نیاز برای صفحهای که در حال حاضر باز است دانلود کنند. در نتیجه زمان بارگذاری و تجربه کلی بهبود پیدا میکند.
سرور توسعه داخلی (Built-in Development Server)
ابزار ViteJS شامل یک سرور توسعه داخلی است که برای بارگذاری سریع و جایگزینی ماژول بهینه شده است. این سرور توسعه و تست اپلیکیشن را سادهتر کرده و باعث میشود هر گونه تغییر انجام شده در کد را در لحظه مشاهده کنید. سرور توسعه، بارگذاری پویا (Automatic Reloading) را نیز پشتیبانی میکند تا بتوانید بدون تاخیر و نیاز به بارگیری مجدد، تغییرات را مشاهده نمایید.
مهمترین مزایای Vite
این ابزار مزایای بسیاری دارد که استفاده از آن را برای همه توسعه دهندگان ضروری میکند، برخی از این مزایا عبارتند از:
زمان ساخت سریعتر (Faster Build Times)
یکی از مهمترین مزایای Vite بهبود فوق العاده در زمان ساخت کد (Build) است. حرکت نوآورانه این ابزار عملا نیاز به یک Bundler (مانند Parcel) را در زمان توسعه از بین میبرد و در نتیجه باعث سرعت بیشتر و به روز رسانی لحظهای مرورگر میشود. این مزیت میتواند زمان بسیار زیادی را برای توسعه دهندگان (مخصوصا در پروژههای بزرگ) صرفه جویی کند و به آنها اجازه تمرکز بیشتر بر روی کدهای با کیفیتتر دهد.
بهبود گردش کار توسعه (Development Workflow)
رویکرد مدرن ابزار ویت در توسعه فرانت اند منجر به تجربه روانتر توسعه دهندگان میشود. زمان ساخت سریع، به روز رسانی لحظهای مرورگر و سرور توسعه داخلی در کنار هم تجربهای روان هم در توسعه و هم در روند پروژه ایجاد میکنند.
حجم بهینه شده کدها (Optimized Code Sizes)
ابزار Vite با استفاده از تکنیک Lazy Loading میتواند منجر به بهینهتر شدن حجم کدها نیز شود. ویژگیهای این ابزار به توسعه دهندگان کمک میکند حجم کدهایی که مینویسند را کاهش داده و در نتیجه تجربهای پویاتر برای کاربران به ارمغان آورند. این مورد مخصوصا برای پروژههای بزرگتر با حجم کد سنگینتر کمک کننده است.
افزایش بهره وری (Increased Productivity)
سریعتر بودن زمان ساخت، تجربه توسعه بهبود یافته و کاهش حجم کدها در Vite میتواند نعمتی برای توسعه دهندگان باشد و سردردهای پیچیدگی Bundlerها و کدهای اضافه را تسکین دهد. بدین ترتیب ویژگیهای این ابزار میتوانند افزایش بهره وری و کدهای بهینه را به راحتی تقدیم تیم شما کنند.
پشتیبانی از استانداردهای مدرن وب (Modern Web Standards)
ابزار ویت برای استفاده از ماژولهای بومی و APIهای مدرن طراحی شد تا خود را به گزینهای ایده آل برای توسعه دهندگانی که به دنبال استانداردهای جدید هستند تبدیل کند. این ویژگی به توسعه دهندگان امکان میدهد تا پروژههایی با ساختار مدرن و مقیاس پذیری زیاد تولید کنند.
آمادهاید تا پروژه خود را به سطح بعدی ببرید؟
با سرور اختصاصی پویان آی تی، ارائه شده از معتبرترین دیتاسنترهای دنیا، منابع اختصاصی و ترافیک نامحدود دریافت کنید!
خرید سرور اختصاصی ایرانمعایب قابل توجه Vite
این ابزار مدرن و سریع با تمام مزایایش، معایبی البته ناچیز در مقابل مزایا ولی قابل توجه دارد که بهتر است پیش از استفاده آنها را بدانید:
- جامعه کاربری کوچکتر: پیشتر گفتیم که ویت، ابزاری مدرن است، بنابراین کمی زمان میبرد تا بین جامعه توسعه دهندگان جا بیفتد و در مقایسه با Create React App و Webpack افراد کمتری از آن استفاده میکنند. این جامعه کاربری کوچک میتواند باعث سردرگم کردن افرادی که به دنبال پاسخ سوالات خود در اینترنت هستند شود.
- سازگاری محدود مرورگرها: Vite از ویژگیهای مدرن جاوا اسکریپت (JavaScript) استفاده میکند. با اینکه ویژگیهای مدرن جاوا اسکریپت در روند توسعه کمک بسیار شایانی میکنند اما هنوز همه مرورگرها پشتیبانی لازم از این ویژگیها را ندارند. این سازگاری محدود میتواند باعث سختتر شدن حل مشکلات در زمان توسعه شود.
رقبای Vite
ابزار ویت اولین ابزاری نیست که برای کمک به توسعه دهندگان در ساخت و توسعه پروژهها تولید میشود. قبل از آن ابزارهایی با پشتیبانی بسیار قوی نیز به کمک توسعه دهندگان آمدهاند و بازاری رقابتی در حد فریمورکهای فرانت اند را راه انداختهاند. در ادامه بیایید با برخی از این رقبا آشنا شویم که دانستن و تست کردنشان خالی از لطف نیست:
- Create React App – CRA: یک گزینه بسیار مجبوب که سازندگان فریمورک عظیم React آن را برای ساخت پروژههای مبتنی بر این فریم ورک معرفی کردند. این ابزار به دلیل سادگی و بی نیازی از پیکربندی میتواند گزینه خوبی باشد اما نه به خوبی Vite!
- Webpack: از قدیمیهای این حوزه که به عنوان باندلر ماژول (Module Bundler) با پیکربندی پیچیده و انعطاف پذیری بالا شناخته میشود.
- Parcel: مانند Create React App نیازی به پیکربندی ندارد و سرعت بالایی را به کاربران پیشنهاد میدهد.
- ESBuild: یک باندلر بسیار سریع که زبان برنامه نویسی Go نوشته شده است و از زبانهای مختلف پشتیبانی میکند.
آموزش نصب Vite
حالا که با ابزار سریع Vite آشنا شدید، بیایید باهم به صورت عملی سرعت آن را تست کنیم!
1. ابتدا دستور زیر را با پکیج منیجر محبوب خود (npm ،pnpm ،yarn) در ترمینال VSCode خود اجرا کنید. در این آموزش به شخصه از pnpm استفاده کردهام.
- در npm:
npm create vite@latest
- در pnpm:
pnpm create vite
- در yarn:
yarn create vite
پس از مشاهده پیغام زیر و تغییر نام پوشه در صورت نیاز، کلید Enter را فشار دهید.
2. در صفحه باز شده فریمورکی که میخواهید از آن در پروژه خود استفاده کنید را انتخاب نمایید (مانند React و یا Angular).
3. پس از انتخاب فریمورک مورد نظر، زبان برنامه نویسی که میخواهید از آن استفاده کنید را انتخاب نمایید (مانند JavaScript و یا TypeScript).
4. پس از تایید و انتخاب زبان، منتظر نصب کامل پروژه خود باشید. در نهایت تصویری مانند تصویر زیر مشاهده خواهید کرد:
5. پس از اتمام نصب، اگر پروژه را در فایل جدیدی نصب کردهاید با دستور cd به مقصد رفته و سپس دستور نصب پکیچ منیجر را وارد کنید.
6. پس از اتمام نصب میتوانید بویلرپلیتها و تمپلیتهای تهیه شده را در فایل خود مشاهده نمایید.
در نهایت
سوالات متداول
از ابزار Vite در بسیاری از موارد مانند راه اندازی یک محیط توسعه بهینه برای فریمورکهای جاوا اسکریپت (JS) استفاده میشود.
Vite در زبان فرانسوی به معنای “سریع” است که اتفاقا در مورد این ابزار شدیدا صدق میکند.
از این ابزار در وب سایتهای بزرگی مانند OpenAI ،Google ،Apple و GitLab استفاده شده که نشان از خوب بودن آن دارد.
منابع
- https://cleancommit.io/blog/what-is-vite/
- https://vite.dev/
اولین دیدگاه را اضافه کنید.