توی مطلب قبلی در مورد اینکه چرا نباید از create-react-app به عنوان ابزار برای ساختن پروژه های ری-اکت استفاده کنیم و مشکلاتی که داشت رو بررسی کردیم.
میتونید اون مطلب رو اینجا بخونید:
توی این مطلب میخوام یه ابزار جایگزین خیلی خوب و خفن معرفی کنم و همه ایرادایی که از CRA گرفتم رو توی Vite هم بررسی کنم که ببینیم آیا اینجا اون مشکلات هستن یا نه؟
ویت (vite) ابزاری بود که توسط سازنده vue ایجاد شد که پروسه build و serve کردن برای پروژه هایی که با vue بودن رو انجام بده ولی به مرور زمان برای بقیه ابزار های فرانت مثل react و svelte هم اومد. هدفش ساده کردن این پروسه ها بود چون هرچقدر که پروژه ها بزرگتر میشدن زمان build شدن و توسعه شون کند تر میشد.
امکانات خیلی خوبی هم داره مثل HMR که جلوتر توضیح میدم و پشت پرده برای build کردن هم از rollup استفاده میکنه.
تقریبا از زمانی که شما این دستور رو وارد کنید:
yarn create vite
تا زمانی که پروژه تون رو بهتون تحویل میده حدودا ۴-۵ ثانیه طول میکشه. البته به خاطر این که هیچ پکیجی رو خودش نصب نمیکنه و شما مجبورید خودتون برید داخل پروژه و اینکارو بکنید. با احتساب زمانی که برای نصب پکیج های اولیه پروژه نیازه حدودا میشه ۲۰ ثانیه.
خب ممکنه فکر کنیم این یه ایراده ولی به نظر من قابلیته. این به شما این اجازه رو میده که بدون اتلاف وقت برای نصب پکیج ها بتونید پروژه تون رو باز کنید. البته این خیلی سختگیرانه است ولی به نظرم این مدلی بهتره.
گرچه حتی نصب کردن پکیج هاش هم کلا ۱۰-۱۲ ثانیه طول میکشه:
البته طول کشیدن دستور اول به این هم ربط داره که توی گزینه هایی که بهتون میده برای انتخاب تمپلیت پروژه خودتون چقدر معطل کنید.
یادتون میاد گفتم با CRA چقدر ممکنه آسیب پذیری های زیادی داشته باشیم؟ بذارید یکم موضوع رو باز کنم. آسیب پذیری های پکیج های npm اصلا چیز جدیدی نیست و همیشه تو همه پروژه ها یه تعدادیشون وجود داره و غیر قابل انکاره. حالا بعضیاشون رو میشه حل کرد خیلی هاش هم نه. مشکل من کجاست؟ مشکل من اینه که وقتی یه پروژه اول بسم الله استارتش میخوره و ساخته میشه دیگه نباید از این آسیب پذیری ها داشته باشه... اگه من رفتم چهارتا دونه پکیج دیگه نصب کردم که آسیب پذیری جدید اضافه کرد به پروژه ام دیگه پای خودمه ولی برای شروع کار این تعداد آسیب پذیری توجیه نداره.
دستور npm audit یا yarn audit رو توی پروژه اجرا کردم:
ماچ بهش!
از سرعت نصب پکیج ها میشه حدس زد که حجم پروژه هم به شدت اومده پایین:
بعد اینکه پروژه رو با vite ساختید متوجه می‌شید که ساختارش یکم با CRA که قبلا باهاش کار می‌کردید متفاوته. بزرگترینش هم نبودن فولدر public هست. در واقع فایل index.html که قبلا توی public بود حالا توی root اصلی پروژه هست.
بقیه چیز ها مثل قبله. از نظر کارکرد هم هیچ تفاوتی با CRA نداره تا جایی که من دیدم، همه چیز رو به راهه و خوب به نظر میرسه.
اگه نیاز باشه کانفیگ خاصی هم انجام بدید میتونید از فایل vite.config.js استفاده کنید. داکیومنتیشن خیلی خوبی هم داره که میتونید اینجا ببینید.
یک قابلیت خیلی خفن و خوبی که vite روی خودش داره (نیازی نیست خودتون کاری انجام بدید) HMR هست یا Hot Module Replacement. این قابلیت به شما اجازه میده که وقتی دارید روی پروژه کار می‌کنید هرچیزی که تغییر میدید بلافاصله توی خروجی میتونید نتیجه رو ببینید! ولی اشتباه نکنید، چون این قابلیت کاملا با hot reloading و ... متفاوته چون stateful هست. یعنی state فعلی اپ رو حفظ میکنه ولی تغییراتی که شما دادید رو اعمال میکنه.
ماچ بهش
سرعت کار کردن با TypeScript حدودا ۲۰ برابر بیشتر میشه به خاطر اینکه از esbuild استفاده میکنه که میتونید اینجا ببینید چیه. طبق داکیومنت vite، مرحله type checking در حین توسعه skip میشه چون فرض رو بر این میزاره که این مرحله از قبل توسط IDE شما انجام میشه که البته این قابل کانفیگه.
همچنین vite در حین توسعه به جای اینکه یه دونه فایل باندل شده JavaScript رو لود کنه (کاری که مثلا CRA انجام میداد) خود کامپوننت های شما رو لود میکنه. تب network توی inspector رو ببینید:
پشتیبانی از code splitting به صورت اتوماتیک تو مرحله build هم یکی دیگه از قابلیت هاش هست که نمیتونید نادیده اش بگیرید.
لیست کامل این فیچر ها رو میتونید اینجا بخونید که بیشتر باهاشون آشنا بشید.
دمتون گرم اگه مطلب رو تا اینجا خوندید!
