سادهسازی Vite
ابزارهای قدیمی مانند Webpack یا Create React App با باندل کردن (bundling) کل پروژه شما در ابتدا کار میکنند. این ابزار هر فایل را میخواند و آنها را به یک فایل جاوااسکریپت غولآسا تبدیل میکند. این روش برای پروژههای کوچک جواب میدهد، اما برای پروژههای بزرگ کارایی ندارد. در پروژههای بزرگ، این فرآیند چندین ثانیه طول میکشد. هر بار که فایلی را ذخیره میکنید، ابزار باید بخش زیادی از آن کار را دوباره انجام دهد.
Vite متفاوت عمل میکند. مرورگرهای مدرن از ES modules به صورت بومی (natively) پشتیبانی میکنند. این یعنی مرورگر میتواند خودش وارد کردن (imports) و خروجی گرفتن (exports) را مدیریت کند. Vite در طول توسعه، کد شما را باندل نمیکند. بلکه هر فایل را تنها زمانی که مرورگر درخواست میکند، به عنوان یک ماژول مجزا ارائه میدهد.
یک رستوران سلفسرویس (buffet) را تصور کنید. سرآشپز قبل از باز کردن درها، تمام غذاها را میپزد. اگر شما یک تغییر کوچک بخواهید، سرآشپز باید کل میز سلفسرویس را دوباره آماده کند. Webpack اینگونه کار میکند. هرچه پروژه بزرگتر باشد، زمان انتظار شما بیشتر میشود.
Vite مانند یک رستوران منومحور (à la carte) است. درها بلافاصله باز میشوند. شما یک غذا سفارش میدهید و سرآشپز فقط همان غذا را آماده میکند. اگر بعداً دسر بخواهید، سرآشپز فقط دسر را آماده میکند. شما منتظر نمیمانید تا تمام منو آماده شود.
Vite از دو استراتژی متفاوت برای دو نیاز متفاوت استفاده میکند:
توسعه (vite dev) • استراتژی: ارائه ماژولهای native ESM بدون باندل کردن. • سرعت شروع: آنی. به اندازه پروژه بستگی ندارد. • چرا: درخواستهای HTTP محلی در کامپیوتر شما سریع هستند.
تولید (vite build) • استراتژی: باندل کردن همه چیز با استفاده از Rolldown. • سرعت شروع: زمان با اندازه پروژه افزایش مییابد. • چرا: صدها فایل مجزا باعث ایجاد درخواستهای HTTP بسیار زیاد برای کاربران میشود. باندل کردن این مشکل را حل میکند.
Vite هنگام کدنویسی به شما سرعت و هنگام عرضه به شما کارایی میدهد.
منبع: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62