چند وقتی میشه که یادگیری روش های optimize کردن پروژه های react رو شروع کردم و بعد از یه سری چیزای پایه، رفتم سراغ webpack و کلا module bundler ها که موقع خوندن چند تا مقاله، به این مسئله برخوردم که همه ی اون مقاله ها درباره استفاده از webpack در اپلیکیشن هاییه که با CRA (Create-React-App) ساخته شدن. برام سئوال شد که چرا هیچ کس از Vite صحبتی نمیکنه؟
پیشنهاد میکنم برای درک بهتر web rendering pipeline رو دقیق مطالعه کنید.
بذارید اینجوری شروع کنم:
این command-line tool، که یک Scaffolding Tool هست رو فیسبوک که سازنده ریکت هست ساخت تا دست و پنجه نرم کردن با boilerplate ها رو برای برنامه نویس ها از بین ببره؛ و یکسری tool رو به طور داخلی خودش نصب و کانفیگ میکنه؛ مثل: jest برای unit testing و webpack برای optimize کردن build پروژه و babel که webpack از اون برای ترجمه کردن JSX به javaScript و بعد تبدیل +ES6 به ورژن های قدیمی تر (معمولا ES5) استفاده میکنه و ...
ویت یه Scaffolding Tool و Build Tool قدرتمنده که سال 2020 برای اولین بار release شد و چیزی که نظر همه رو جلب کرد سازنده اون بود، Evan You که سازنده فریمورک Vue.js هست که به خاطر سرعتش معروفه؛ اصلی ترین دلیل معروف شدن Vite، به خاطر سرعت خیلی بیشترش نسبت به بقیه build tool ها بود. Vite سال 2021 شروع به معروف شدن کرد و برنامه نویس ها از اون سال به بعد دنبال تجربه سریع تر موقع development بودن که به vite رسیدن و به مرور همه شروع به استفاده ازش کردن و سرعت باورنکردنیش رو تجربه کردن و چون فریمورک های غیر از ریکت مثل Vue و Svelte و ... رو هم ساپورت میکرد، داخل همه ی community ها مشهور شد، به قدری که پروژه های بزرگ هم شروع به استفاده از اون کردن.
یکی از دلایل سرعت بسیاد زیادش، Hot Module Replacement (HMR) هست؛ نحوه عملکردش اینجوریه که همه ی ماژول ها رو کش میکنه و بدون reload کردن کل پیج، ماژول های تغییر کرده رو شناسایی میکنه و فقط قسمت هایی که اون ماژول ها توشون استفاده شدن رو آپدیت میکنه که باعث بهبود فوقلعاده تجربه development میشه؛ برای مثال، inspect tool داخل browser ها رو در نظر بگیرید، با تغییر دادن یک استایل، ویت با delay میلی ثانیه ای اون ماژول رو آپدیت میکنه.
یکی دیگه از feature هاش اینه که موقع بیلد کردن، code splitting و tree shaking رو خودکار روی پروژه انجام میده (هم پروداکشن هم دولپمنت).
ویت به صورت پیش فرض از دو module bundler استفاده میکنه: موقع development از باندلر esbuild و از rollup موقع پروداکشن استفاده میکنه که هر دو تاشون به صورت دیفالت با یه کانفیگ سطح بالا کانفیگ شدن که برای اکثر پروژه ها مناسبه ولی میشه باز هم اونا رو تا ریز ترین جزئیات کانفیگ کرد و هر دوتاشون از طیف وسیعی از پلاگینا پشتیبانی میکنن که میشه تو فایل vite.config.(ts/js) کانفیگشون کرد.
چون بر پایه Golang هست و به همین خاطر، با عملیات های سنگین کند نمیشه و بجز js، برای Go هم در دسترسه و از multi-core processor و سرعت Go استفاده میکنه تا فایل ها رو تبدیل و باندل کنه که اینها فقط چند تا از نکات مثبتش هست. همچنین مقایسه سرعتش با بقیه bundler ها هم داخل وبسایت رسمیشون هست.
یه فیچر دیگه که ویت داره اینه که میتونه پروژه رو با پلتفرم SWC کانفیگ کنه که چند تا خوبی داره:
چون SWC روی Rust نوشته شده، سرعت خیلی بیشتری به برنامه میده؛ طبق گفته خودشون داخل وبسایت رسمیشون، SWC از Babel، بیست برابر سریع تره. که میشه هم bundling و هم compiling رو باهاش انجام داد که طیف عظیمی از پلاگین هارو هم شامل میشه.
بهتون پیشنهاد میکنم برای باندل کردن پروژه های next.js، سراغ یادگیری turbopack برین. درسته که هنوز برای پروداکشن، ساپورت ندارن، ولی برای development خیلی خوبه؛ چرا? دوباره Rust.
و در آخر، اینها ذره ای از فیچر هایی بود که vite ارائه میده و پیشنهاد میکنم برای راحت تر و سریع تر شدن کارهاتون، فیچر های دیگه ی SWC و بقیشون رو بررسی کنید و سرعت برنامه هاتونو افزایش بدین.
