اضافه کردن vite به پروژه های ری اکت در کمتر از 30 ثانیه

تا قبل از اینکه ES modules در مرورگر ها پیاده سازی بشن دولوپر ها راه استانداردی نداشتن برای اینکه کد جاوااسکریپتشون رو به صورت ماژولار بنویسن پس در نتیجه بر حسب نیاز ابزار هایی مثل webpack به وجود اومدن که همه کد های مارو کنار هم bundle میکردن و به صورت یک فایل تحویل مرورگر میدادن که هم بتونیم به صورت ماژولار کد هامون رو بنویسیم و هم مرورگر ها مشکلی نداشته باشن.

اما الان در سال 2021 هستیم و همه مرورگر های مدرن از ES modules پشتیبانی میکنن اما ما هنوز داریم از وب پک استفاده میکنیم. هر بار میخواهیم محیط دولوپمنت رو ران کنیم باید براش یکی دو دقیقه صبر کنیم تا استارت بشه و وقتی پروژه بزرگ تر میشه برای دیدن هر تغییر هم باید چند ثانیه صبر کنیم. اما الان راه های بهتری برای انجام این کار داریم که یکیش vite هست.

کلمه vite در زبان فرانسوی به معنای "سریع" هست و به صورت /vit/ (ویت) تلفظ میشه. و بزارین بهتون اینو بگم که واقعا خیلی خیلی سریعه. اینقد سریع که چند بار اول که ازش استفاده میکنید باورتون نمیشه سرور دولوپمنت ران شده یا اینکه تغییراتتون اعمال شده. وقتی که از وب پک استفاده میکنیم هربار که سرور رو استارت میکنیم تمام کد های شما کنار هم قرار میگیرن و یک باندل رو درست میکنن که تحویل مرورگر داده میشه و هر وقت تغییراتی انجام میدین هم دوباره این باندل باید درست بشه که همونظور که مشخصه پروسه سریعی نیستش (این پروسه بدون استفاده از HMR منظورمون هست اما همچنان با اون هم با بزرگ شدن پروژه اذیت کننده میشه). اما vite به یک روش دیگه کد های شما رو هندل میکنه. این پروسه توی دو مرحله انجام میشه:

1- برای dependency ها: vite میاد همه dependency های شما رو پیدا میکنه و با esbuild از اونها یک باندل درست میکنه. این مرحله ضروریه بخاطر اینکه مرورگر ها نمیتونن ایمپورت کردن از پکیج ها رو متوجه بشن و vite باید اونا رو توی یک path مثل بقیه فایل ها serve کنه که مرورگر بتونه ازشون استفاده کنه. این پروسه خیلی بهینه اس بخاطر اینکه esbuild با زبان go نوشته شده و خودش خیلی خیلی سریع تر از بقیه bundler ها هست (حدود 100 برابر سریع تر) و همینطور این باندلی که از dependency ها درست میشه هم روی دیسک cache میشه هم سمت مرورگر، که وقتی در حال دولوپ هستید مرورگر dependency هارو مستقیم از cache خودش بخونه و از vite دوباره اونارو درخواست نکنه. این cache وقتی پکیج های شما عوض میشن هم دوباره جنریت میشه.

2- برای سورس کد شما: کد های شما به صورت module به مرورگر تحویل داده میشن و خود مرورگر با توجه به صفحه ای که داخلش هستید فقط کد های اون قسمت رو میگیره و میخونه و نیازی نیست که همه کد های شما لود بشه. همچنین چون مرورگر فقط فایل جاوااسکریپت قبول میکنه، اگه لازم باشه vite میتونه کد شما رو transpile کنه و به مرورگر تحویل بده که توی خوندن اونا مشکلی پیش نیاد. پس هر چقدر هم کدتون بزرگ تر بشه مشکلی از نظر سرعت پیش نمیاد چون فقط کدهایی که لازم هست لود میشن برعکس وب پک که همه کد هارو لود میکنه و با بزرگ تر شدن پروژه اذیت کننده میشه.

توجه کنید که این توضیحات برای دولوپمنت بود و vite برای بیلد پروداکشن فعلا از rollup استفاده میکنه و باندل شما رو درست میکنه. در آینده احتمالا از esbuild برای درست کردن بیلد پروداکشن استفاده میشه اما چون هنوز تکمیل نیست از اون به صورت پیش فرض استفاده نمیشه اما خودتون میتونین بجای rollup از اون استفاده کنید.

خود vite به صورت پیش فرض میتونه jsx, vue, typescript, web assembly, json, static assets, css modules, scss رو هندل کنه و در صورت نیاز transpile کنه. برای مثال چون vite از esbuild استفاده میکنه، transpile کردن کد های تایپ اسکریت حدود 20-30 برابر سریع تر از کامپایلر خود تایپ اسکریپت انجام میشه ( البته یک سری تفاوت های ریز داره که اینجا میتونید بخونید). در نتیجه پس میتونین به راحتی این فایل هارو تحویل vite بدین بدون اینکه نیاز باشه از babel یا لودر خاصی استفاده کنید. همچنین vite یک سیستم پلاگین هم داره که اگر میخواین قابلیتی رو بهش اضافه کنید که به صورت پیش فرض وجود نداره دستتون باز باشه.

حالا که با vite آشنا شدیم، چجوری به پروژه هامون اضافش کنیم؟ من اینجا مثالش رو برای create-react-app میگم اما این توضیحات برای هر پروژه ای یکسان هست و فرقی نداره.

1. ابتدا vite رو نصب میکنیم و فایل package.json رو تغییر میدیم که ازش استفاده کنه:

$ npm install --save-dev vite

&quotscripts&quot: {
  &quotstart&quot: &quotvite&quot,
  &quotbuild&quot: &quotvite build&quot,
}

2. بعدش باید فرمت همه فایل های کامپوننت هاتون رو به jsx یا tsx تبدیل کنید. دلیل این کار رو میتونین اینجا بخونین.

3. حالا باید فایل index.html رو از پوشه public به روت پروژه بیارین ( یعنی جایی که package.json هست). دلیل این کار اینه که vite مثل یک سرور عمل میکنه و از این فایل به عنوان entry point پروژه شما استفاده میکنه نه مثل create-react-app که این فایل براش مثل یک تمپلیت هست که پروژه رو داخلش قرار بده.

4. حالا باید هر جا داخل فایل index.html از "%PUBLIC_URL%" استفاده شده پاک بشه. یعنی برای مثال:

<link rel=&quoticon&quot href=&quot%PUBLIC_URL%/favicon.ico&quot />

تبدیل میشه به:

<link rel=&quoticon&quot href=&quot/favicon.ico&quot />

همچنین در نهایت توی فایل index.html قبل از بسته شدن تگ body باید یک تگ اسکریپت از نوع module اضافه کنید که به فایلی که پروژه اتون از اون شروع میشه اشاره بکنه. برای مثال این شکلی میشه:

<body>
  <div id=&quotroot&quot></div>
  <script type=&quotmodule&quot src=&quot/src/index.jsx&quot>
</body>

تبریک میگم حالا میتونین از vite استفاده کنین :) این تنظیمات با خودش HMR نداره اما اضافه کردنش ساده اس و میتونین از اینجا پیش بگیرینش.

روی سیستم ویندوزی خودم یه پروژه تازه درست شده با create-react-app حدود 2 دقیقه و 5 ثانیه طول میکشه استارت اولیه اش در حالی این زمان با vite حدودا 0.5 ثانیه طول میکشه. یعنی 250 برابر سریع تر!! البته این صرفا برای من هست و برای بقیه ممکنه cra سریع تر استارت بشه.

همچنین اگر میخواین باهاش ssr انجام بدین هم، کارتون خیلی راحته و میتونین از روی راهنمای خود vite پیش برین یا اینکه از این پلاگین استفاده کنین که کارتونو راحت تر هم میکنه.

اگه میخواین کلا قید create-react-app بزنین و با vite از اول جلو برین هم میتونین از این دستور استفاده کنید و از بین تمپلیت هایی که برای فریم ورک های مختلف داره یکی رو انتخاب کنید و شروع کنید:

$ npm init @vitejs/app

اگر میخواین با vite یه تجربه شبیه به create-react-app داشته باشین هم میتونین از تمپلیت خودم استفاده کنید که چیزایی مثل jest و eslint رو کانفیگ کرده و برای vite یک سری تنظیمات و پلاگین ها اضافه کرده که شبیه create-react-app بشه.

امیدوارم وقتتون مفید سپری شده باشه.