Vite js یک ابزار مدرن ساخت و توسعه برای وب‌اپلیکیشن‌ها است که توسط Evan You، خالق Vue.js، توسعه یافته است. این ابزار به طور خاص برای بهبود سرعت و کارایی در فرآیند توسعه و ارائه وب‌اپلیکیشن‌ها طراحی شده است. هدف اصلی این ابزار، بهبود تجربه توسعه‌دهندگان وب و افزایش سرعت فرآیند توسعه و باندلینگ است. همچنین از ویژگی‌های مدرن جاوااسکریپت و مرورگرها بهره می‌برد تا زمان بارگذاری را کاهش دهد و کارایی را افزایش دهد. همچنین،  این امکان را فراهم می‌کند که تغییرات کد خود را در لحظه و بدون نیاز به رفرش صفحه مشاهده کنید. این ویژگی‌ها، Vite را به یکی از بهترین انتخاب‌ها برای توسعه‌دهندگان فرانت‌اند تبدیل می‌کند.

تاریخچه Vite js

این ابزار توسط Evan You، خالق Vue.js، در سال 2020 معرفی شد. هدف اصلی از توسعه این تکنولوژی، رفع مشکلات سرعت و کارایی ابزارهای ساخت و توسعه وب موجود مانند Webpack بود. در حالی که ابزارهای سنتی مانند Webpack نیاز به زمان بیشتری برای راه‌اندازی و ساخت پروژه‌ها دارند، این سیستم با استفاده از ماژول‌های ES بومی و ویژگی‌های مدرن جاوااسکریپت، توانسته این فرآیندها را به طور چشمگیری بهبود بخشد. این ابزار با تکیه بر تجربه کاربری بهتر و کاهش زمان انتظار برای توسعه‌دهندگان، توانسته است جایگاه ویژه‌ای در بین ابزارهای توسعه فرانت‌اند پیدا کند و به سرعت محبوبیت کسب کند.

ویژگی‌ها و قابلیت‌های Vite js

این فریم‌ورک با ویژگی‌ها و قابلیت‌های منحصر به فرد خود توانسته است جایگاه ویژه‌ای در بین ابزارهای توسعه فرانت‌اند پیدا کند. این ابزار به دلیل سرعت بالا، قابلیت Hot Module Replacement (HMR)، پشتیبانی از ماژول‌های ES و پشتیبانی از TypeScript و JSX، توجه بسیاری از توسعه‌دهندگان را به خود جلب کرده است. همچنین، پشتیبانی از پیش‌پردازنده‌های CSS مانند Sass و Less از دیگر ویژگی‌های برجسته این تکنولوژی است. در ادامه به هر یک از این ویژگی‌ها می‌پردازیم.

سرعت بالا و بهبود عملکرد

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

Hot Module Replacement

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

پشتیبانی از ماژول‌های ES

این فریم‌ورک از ماژول‌های ES پشتیبانی می‌کند که به کاهش زمان بارگذاری و افزایش کارایی کمک می‌کند. این ابزار با استفاده از ماژول‌های ES، به جای باندل کردن کل کد، تنها ماژول‌های مورد نیاز را بارگذاری می‌کند. این روش باعث می‌شود که زمان بارگذاری اولیه کاهش یابد و تجربه کاربری بهتر شود.

پشتیبانی از TypeScript و JSX

این تکنولوژی به طور پیش‌فرض از TypeScript و JSX پشتیبانی می‌کند که این امکان را به توسعه‌دهندگان می‌دهد تا از این زبان‌ها و تکنولوژی‌ها در پروژه‌های خود استفاده کنند. پشتیبانی از TypeScript باعث می‌شود که کدنویسی با اطمینان بیشتری انجام شود و خطاها در زمان کدنویسی کاهش یابد. همچنین، پشتیبانی از JSX برای توسعه‌دهندگان React بسیار مفید است و تجربه توسعه را بهبود می‌بخشد.

پشتیبانی از پیش‌پردازنده‌های CSS

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

مزایا و معایب Vite.js

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

مزایای Vite.js

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

• سرعت بالا: یکی از بزرگترین مزایای این تکنولوژی، سرعت بالای آن در راه‌اندازی و باندلینگ پروژه‌ها است. این ابزار با استفاده از ماژول‌های ES بومی، فرآیندهای توسعه را به طور چشمگیری بهبود می‌بخشد.
• تجربه توسعه بهتر: این سیستم با پشتیبانی از Hot Module Replacement (HMR) به توسعه‌دهندگان این امکان را می‌دهد تا تغییرات کد را به صورت فوری در مرورگر مشاهده کنند، بدون نیاز به بارگذاری مجدد صفحه.
• پیکربندی ساده: پیکربندی این فریم‌ورک به طور پیش‌فرض بسیار ساده و مستقیم است. بسیاری از تنظیمات به صورت خودکار انجام می‌شوند و نیاز به پیکربندی‌های پیچیده کاهش می‌یابد.
• پشتیبانی از تکنولوژی‌های مدرن: این تکنولوژی به طور پیش‌فرض از TypeScript، JSX، و پیش‌پردازنده‌های CSS مانند Sass و Less پشتیبانی می‌کند. این ویژگی‌ها به توسعه‌دهندگان امکان استفاده از تکنولوژی‌های مدرن را به سادگی فراهم می‌کند.
• کاهش حجم باندل: این فریم‌ورک با استفاده از ماژول‌های ES، تنها ماژول‌های مورد نیاز را بارگذاری می‌کند که باعث کاهش زمان بارگذاری و حجم باندل می‌شود.

معایب Vite.js

هر چند این ابزار دارای مزایای فراوانی است، اما مانند هر ابزار دیگری دارای محدودیت‌ها و معایبی نیز می‌باشد. این معایب می‌توانند تاثیر مهمی بر تصمیم‌گیری توسعه‌دهندگان در انتخاب ابزار مناسب برای پروژه‌های خود داشته باشند. در ادامه به بررسی برخی از معایب اصلی این ابزار می‌پردازیم.

• جامعه کاربری کوچک‌تر: با وجود رشد سریع این پلتفرم، جامعه کاربری آن هنوز به اندازه Webpack بزرگ نیست. این موضوع می‌تواند دسترسی به منابع و کمک‌های بیشتر را محدود کند.
• پشتیبانی از پروژه‌های بزرگ: Vite.js به طور خاص برای پروژه‌های کوچک تا متوسط طراحی شده است و ممکن است در مدیریت پروژه‌های بسیار بزرگ با پیچیدگی‌های خاص خود مواجه شود.
• پشتیبانی از چندین خروجی: پشتیبانی Vite.js از تولید چندین باندل خروجی برای برنامه‌های مختلف ممکن است محدودتر باشد و نیاز به تنظیمات بیشتری داشته باشد.
• منابع آموزشی کمتر: به دلیل جدیدتر بودن Vite.js نسبت به Webpack، منابع آموزشی و مستندات جانبی کمتری در دسترس است که می‌تواند برای توسعه‌دهندگان تازه‌کار چالش‌برانگیز باشد.

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

نحوه استفاده از Vite js

برای استفاده از این ابزار، ابتدا باید آن را نصب کنید. نصب Vite بسیار ساده است و می‌توانید با استفاده از npm یا yarn آن را به صورت سراسری نصب کنید. بعد از نصب، می‌توانید یک پروژه جدید ایجاد کنید و سپس سرور توسعه‌دهنده را راه‌اندازی کنید. در ادامه به توضیح دقیق‌تر مراحل نصب و راه‌اندازی این ابزار می‌پردازیم.

نحوه نصب 

برای نصب با استفاده از npm، دستور زیر را اجرا کنید:

npm install -g vite

برای نصب با استفاده از yarn، دستور زیر را اجرا کنید:

yarn global add vite

این دستورات Vite را به صورت سراسری بر روی سیستم شما نصب می‌کنند و به شما این امکان را می‌دهند که از آن در هر پروژه‌ای استفاده کنید.

ایجاد پروژه جدید

بعد از نصب این تکنولوژی، می‌توانید یک پروژه جدید با استفاده از npm یا yarn ایجاد کنید. به عنوان مثال:

npm init vite //for npm
yarn create vite //for yarn

بعد از اجرای این دستور، از شما خواسته می‌شود که نام پروژه خود را وارد کنید. به عنوان مثال:

در ادامه، می‌توانید یک فریمورک را برای ایجاد پروژه انتخاب کنید:

ما در این بخش React را انتخاب می‌کنیم. بعد از انتخاب React، می‌توانید نوع پروژه را انتخاب کنید که با JavaScript یا TypeScript باشد:

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

cd 7learn-project
npm install
npm run dev

این دستورات باعث می‌شوند که پروژه شما راه‌اندازی شده و سرور توسعه‌دهنده شروع به کار کند. اکنون می‌توانید تغییرات خود را در پروژه اعمال کرده و آن‌ها را به صورت زنده مشاهده کنید.

 کانفیگ Vite.js در پروژه‌های لاراول

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

پیش از شروع، اطمینان حاصل کنید که Node.js و npm یا yarn بر روی سیستم شما نصب باشد. همچنین، نسخه اخیر Composer بر روی سیستم شما نصب شده باشد.

ایجاد پروژه جدید لاراول با Vite

برای ایجاد یک پروژه جدید لاراول که به صورت پیش‌فرض از این فریم‌ورک استفاده می‌کند، از دستور Composer زیر استفاده کنید:

composer create-project laravel/laravel 7learn-vite-project

پس از ایجاد پروژه، وارد پوشه پروژه شوید:

cd 7learn-vite-project

نصب وابستگی‌های npm

برای نصب تمام وابستگی‌های جاوااسکریپت و Vite، دستور زیر را اجرا کنید:

npm install

کانفیگ فایل vite.config.js

فایل کانفیگ Vite از پیش در پروژه لاراول تنظیم شده است. برای مشاهده و ویرایش آن، فایل vite.config.js را باز کنید و محتوای زیر را در آن بررسی کنید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

این تنظیمات اعلام می‌کند که فایل‌های ورودی کدام هستند و امکان رفرش سریع (Hot Module Replacement) را فعال می‌کند.

تنظیم اسکریپت‌های npm

برای ساده‌تر کردن فرآیند ساخت و توسعه، اسکریپت‌های npm را در فایل package.json خود اضافه کنید:

"scripts": {
    "dev": "vite",
    "build": "vite build"
}

این اسکریپت‌ها به شما اجازه می‌دهند تا با اجرای دستورات npm run dev و npm run build، پروژه خود را در حالت توسعه و تولید قرار دهید.

وارد کردن Assetها در resources/js/app.js

برای استفاده از assetها و فایل‌های جاوااسکریپت دیگر در پروژه خود، باید آن‌ها را در فایل resources/js/app.js وارد کنید. به عنوان مثال، اگر از یک فایل CSS، یک تصویر، و چندین فایل جاوااسکریپت دیگر استفاده می‌کنید، می‌توانید به صورت زیر عمل کنید:

// Importing CSS file
import '../css/app.css';
// Importing an image
import myImage from '../images/my-image.png';
// Importing additional JavaScript files
import './additional-file1.js';
import './additional-file2.js';
// Example usage of the imported image
const img = document.createElement('img');
img.src = myImage;
document.body.appendChild(img);
// Your main JavaScript code
console.log('Hello from app.js');

این کد نشان می‌دهد که چگونه می‌توانید فایل‌های CSS، تصاویر، و فایل‌های جاوااسکریپت دیگر را در فایل جاوااسکریپت خود وارد و استفاده کنید.

استفاده از Vite در Blade Templates

برای استفاده از خروجی‌های Vite در قالب‌های Blade لاراول، باید از دستورهای Blade ارائه شده توسط پلاگین لاراول Vite استفاده کنید. به عنوان مثال، در فایل resources/views/welcome.blade.php می‌توانید به صورت زیر عمل کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7Learn Project</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <h1>Hello, Laravel with Vite! </h1>
</body>
</html>

در اینجا، نیازی به جداگانه ایمپورت کردن فایل‌های CSS و جاوااسکریپت نیست؛ شما می‌توانید همه فایل‌ها را به صورت یکجا و به ترتیب در دستور @vite وارد کنید.

اجرای پروژه

برای شروع پروژه در حالت توسعه، دستور زیر را اجرا کنید:

npm run dev

این دستور یک سرور محلی راه‌اندازی می‌کند که شما می‌توانید تغییرات خود را به صورت زنده مشاهده کنید. برای ساخت نسخه build، از دستور زیر استفاده کنید:

npm run build

این دستور فایل‌های نهایی برای deploy را ایجاد می‌کند که می‌توانید آن‌ها را بر روی سرور قرار دهید.

مقایسه Webpack و Vite: کدام ابزار برای توسعه وب بهتر است؟

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

سرعت راه‌اندازی و باندلینگ

• Webpack: یک ابزار قدرتمند و منعطف برای باندلینگ است که می‌تواند پروژه‌های پیچیده و بزرگ را مدیریت کند. با این حال، زمان راه‌اندازی و باندلینگ در Webpack معمولاً طولانی‌تر است، به ویژه برای پروژه‌های بزرگ.
• Vite: با هدف افزایش سرعت راه‌اندازی و باندلینگ طراحی شده است. این ابزار از ماژول‌های ES بومی استفاده می‌کند که باعث کاهش زمان راه‌اندازی می‌شود.

پشتیبانی از HMR (Hot Module Replacement)

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

پیکربندی و تنظیمات

• Webpack: نیاز به تنظیمات و پیکربندی‌های پیچیده دارد. فایل پیکربندی Webpack معمولاً شامل تنظیمات زیادی است که می‌تواند برای توسعه‌دهندگان تازه‌کار چالش‌برانگیز باشد.
• Vite: به طور پیش‌فرض پیکربندی ساده‌تری دارد و بسیاری از تنظیمات به صورت خودکار انجام می‌شوند. این ویژگی به توسعه‌دهندگان اجازه می‌دهد تا به سرعت پروژه‌های خود را راه‌اندازی کنند.

پشتیبانی از تکنولوژی‌های جدید

• Webpack: از تکنولوژی‌های جدید مانند TypeScript، JSX، و پیش‌پردازنده‌های CSS مانند Sass و Less پشتیبانی می‌کند. با این حال، اضافه کردن این قابلیت‌ها نیاز به تنظیمات بیشتری دارد.
• Vite: به صورت پیش‌فرض از TypeScript، JSX و پیش‌پردازنده‌های CSS پشتیبانی می‌کند. این ویژگی‌ها به راحتی قابل استفاده هستند و نیاز به تنظیمات اضافی کمتری دارند.

جامعه کاربری و مستندات

• Webpack: به دلیل سابقه طولانی‌تر، جامعه کاربری بزرگی دارد و مستندات بسیار جامعی برای آن موجود است. توسعه‌دهندگان می‌توانند به راحتی منابع و کمک‌های لازم را پیدا کنند.
• Vite: به تازگی معرفی شده است و جامعه کاربری آن در حال رشد است. مستندات Vite نیز کامل و کاربردی است، اما ممکن است به اندازه Webpack منابع جانبی و کمک‌های زیادی نداشته باشد.

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

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

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

جمع‌بندی

Vite.js، ابزاری مدرن برای توسعه وب‌اپلیکیشن‌ها، توسط Evan You، خالق Vue.js، در سال 2020 معرفی شد. هدف اصلی این ابزار، بهبود سرعت و کارایی در فرآیند توسعه و باندلینگ است. این ابزار با استفاده از ماژول‌های ES بومی و ویژگی‌های مدرن جاوااسکریپت، تجربه توسعه‌دهندگان را بهبود بخشیده و زمان بارگذاری را کاهش می‌دهد.

Vite.js دارای ویژگی‌های برجسته‌ای همچون سرعت بالا، قابلیت Hot Module Replacement (HMR)، پشتیبانی از ماژول‌های ES، TypeScript و JSX، و همچنین پشتیبانی از پیش‌پردازنده‌های CSS مانند Sass و Less است. این ویژگی‌ها باعث شده تا Vite.js یکی از بهترین انتخاب‌ها برای توسعه‌دهندگان فرانت‌اند باشد.

استفاده از Vite.js در پروژه‌های لاراول نیز امکان‌پذیر است و به توسعه‌دهندگان اجازه می‌دهد تا از مزایای سرعت و بهینه‌سازی این ابزار بهره‌مند شوند. مراحل نصب و راه‌اندازی Vite.js در پروژه‌های لاراول بسیار ساده بوده و شامل نصب وابستگی‌ها و تنظیم فایل‌های کانفیگ می‌شود.

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

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

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