Vite.js یک ابزار توسعه سریع برای پروژه‌های وب مدرن است که با بهبود تجربه توسعه، روی سرعت و عملکرد تمرکز دارد. همچنین از importهای ES مرورگر native برای فعال کردن پشتیبانی از مرورگرهای مدرن بدون فرآیند ساخت استفاده می‌کند.

Vite از دو بخش عمده تشکیل شده است:

Vite.js چگونه کار می‌کند؟

زمانی که ماژول‌های ES در ES2015 معرفی شدند، بسیاری از مرورگرها پشتیبانی ضعیفی از ماژول‌های ES6 داشتند. برای رفع این مشکل، اکنون مرورگرهای مدرن از ماژول های native ES پشتیبانی می‌کنند. این موضوع به توسعه‌دهندگان کمک می‌کند تا بتوانند به راحتی از importو exportبه صورت native استفاده کنند.

در ES native، ایمپورت(import) باید یک URL نسبی یا مطلق داشته باشد، زیرا از import ماژول خالی پشتیبانی نمی‌کند. به عنوان مثال:

import { someMethod } from 'my-dep'

کد بالا باعث ایجاد خطا در مرورگر می‌شود زیرا بسیاری از مرورگرها از ماژول های ES6 پشتیبانی نمی‌کنند. اکنون سوالی که مطرح می‌شود این است که Vite چگونه این موضوع را مدیریت می‌کند؟

Vite به صورت خودکار import ماژول خالی از سورس فایل‌های ما را شناسایی می‌کند و دو عمل زیر را روی آن‌ها انجام می‌دهد:

/node_modules/.vite/my-dep.js?v=f3sf2ebb

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

اکنون که می‌دانیم Vite چیست و چگونه کار می‌کند، ممکن است سوال ایجاد شود که چرا باید از Vite استفاده کنیم؟ دلایل زیادی برای این کار وجود دارد که در ادامه برخی از آن‌ها را باهم بررسی می‌کنیم.

Performance

Pre-bundling با Vite’s ESbuild آن را ۱۰ تا ۱۰۰ برابر سریع‌تر از استفاده از هر bundler دیگری در جاوااسکریپت می‌کند. این موضوع به این دلیل است که به بهبود سرعت صفحه و تبدیل ماژول‌های CommonJS / UMD به ESM کمک می‌کند.

با توجه به مستندات Vite، مرحله Pre-bundling با esbuild انجام می‌شود و زمان cold start مربوط به Vite را به طور قابل توجهی سریع‌تر از هر bundler مبتنی بر جاوااسکریپت می‌کند.

Hot Module Replacement (HMR)

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

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

با عملکرد HMR، می‌توانیم برنامه‌های سبک‌تر و سریع‌تری را بدون توجه به تعداد ماژول‌ها یا اسکیل برنامه‌ طراحی کنیم.

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

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

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

vite --config my-config.js

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

قبل از اینکه بتوانیم یک پروژه Vite ایجاد کنیم، باید نرم‌افزارهای زیر را بر روی سیستم خود نصب کنیم:

هنگامی که این موارد را نصب کردیم، اکنون می‌توانیم یک پروژه Vite ایجاد کنیم.

نحوه ایجاد یک پروژه Vite

برای ایجاد یک برنامه Vite، ابتدا ترمینال خود را باز کرده و به پوشه‌ای که می‌خواهیم برنامه Vite را در آن ذخیره کنیم می‌رویم. سپس دستور زیر را اجرا می‌کنیم:

npm create @vitejs/app my-vite-app

my_vite_appنام برنامه Viteای است که می‌خواهیم ایجاد کنیم. شما می‌توانید آن را به هر نامی که دوست دارید تغییر دهید.

پس از اجرای دستور بالا، از ما خواسته می‌شود تا یک فریم‌ورک و قالب (variant) انتخاب کنیم. در این مقاله ما از React استفاده می‌کنیم، اما شما می‌توانید هر فریم‌ورک و قالبی را که با آن آشنا هستید انتخاب کنید.

سپس دستورات زیر را اجرا می‌کنیم تا نصب تمام شود:

cd vite_application
npm install

فرآیند نصب ممکن است چند دقیقه طول بکشد، بنابراین باید صبر کنیم تا مراحل کامل شود.

نحوه اجرای یک برنامه  Vite

برای اجرای برنامه Vite در ترمینال، به پوشه برنامه (vite_application) می‌رویم و سپس دستور dev زیر را اجرا می‌کنیم تا سرور توسعه راه‌اندازی شود:

npm run dev

با اجرای دستور بالا سرور توسعه راه‌اندازی می‌شود. سپس آدرس http://localhost:3000را در مرورگر باز می‌کنیم.

ساختار پوشه Vite

در ادامه نگاهی به نحوه سازماندهی پوشه‌های برنامه Vite می‌اندازیم. همچنین تعدادی از پوشه‌ها و فایل‌ها را با جزئیات بررسی خواهیم کرد.

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

OPEN EDITORS
|__index.html

VIRE application
|__node_modules
|__src
    |_APP.css
    |_APP.jsx
    |_favicon.svg
    |_index.css
    |_logo.svg
    |_main.jsx
|__.gitignore
|__index.html
|__package-Lock.json
|__package.json
|__vite.config.js

پوشه node_modules

پوشه node_modules شامل تمام dependencyهای لازم برای برنامه است که در فایل package.json مشخص شده است. پس از اجرای دستور npm install، تمام dependencyهای پیکربندی شده در package.json در پوشه node_modules دانلود می‌شوند.

هنگامی که سورس کد خود را در GitHub قرار می‌دهیم، نیازی نیست پوشه node_modules را هم آپلود کنیم زیرا کاربران می‌توانند تمام dependencyهای مورد استفاده در برنامه را از طریق package.json نصب کنند.

می‌توانیم فایل package.json را در دایرکتوری root برنامه parent پیدا کنیم.

پوشه src

پوشه src یکی از پوشه‌هایی است که هنگام توسعه برنامه‌های Vite تعامل بیشتری با آن داریم. این پوشه شامل app.jsx، main.jsx، app.css و index.js می‌باشد.

همه محتویات برنامه ما مانند تصاویر، ویدئوها و فایل‌های دیگر باید در پوشه src ذخیره شوند زیرا Vite به طور خودکار همه URLهای داخل index.html را تغییر می‌دهد.

App.jsx و main.jsx

فایل app.jsx کامپوننت پایه‌ای است که به عنوان یک container برای تمام کامپوننت‌های دیگر استفاده شده در برنامه عمل می‌کند.

فایل main.jsx جایی است که ما شناسه root از index.html را هدف قرار می‌دهیم و تمام کامپوننت‌های مورد استفاده در برنامه را در آن رندر می‌کنیم.

index.css و app.css

این فایل‌ها شامل تمام استایل‌های CSS مورد استفاده در برنامه هستند. می‌توانیم فایل CSS خود را اضافه کرده و یا استایلی را تغییر دهیم.

جمع‌بندی

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