متوجه شدم یکی از "بدترین" ابزار هایی که همیشه استفاده میکنم همین CRA هست که برای ساختن یه پروژه React ازش استفاده میشه.
اینجا میخوام بگم که چرا دیگه ازش استفاده نمیکنم و توصیه میکنم شما هم دیگه بذاریدش کنار.
یه مدت نسبتا طولانی، از اون وقتی که با React آشنا شدم، اولین ابزاری که یاد گرفتم باهاش پروژه ری-اکت بسازم CRA بود. خب اوایل تقریبا گزینه دیگه ای وجود نداشت و منم خوشحال بودم. حداقل خیلی خیلی بهتر از زمانی بود که با Webpack مجبور بودیم خودمون یه کانفیگ خاص بنویسیم که آخرش هم همش از اینور و اونورش در می‌رفت و اصلا چیز درست درمونی نمیشد.
ولی الان قضیه فرق کرده، بریم با هم ببینیم CRA چه مشکلاتی داره و چرا دیگه نباید یکی از گزینه هامون باشه.
یه مدت که دوره برگزار میکردم (و البته هنوز بعضی وقتا میکنم) و میخواستم یه پروژه جدید بسازم یادم میاد که با سرعت اینترنتی که ما داریم حداقل ۶-۷ دقیقه حتی بعضا ۱۰ دقیقه طول می‌کشید که همه پکیج ها نصب بشن و بشه ازشون استفاده کرد.
برای پروژه های واقعی خیلی مشکلی نیست چون ۷ تا ۱۰ دقیقه در مقایسه با زمان کلی که ازمون میگیره تقریبا هیچی نیست. ولی وقتی بحث آموزش میاد وسط واقعا حوصله‌ت سر میره، مخصوصا اگه بخوای تو یه جلسه چندبار اینکار رو انجام بدی. البته موضوع بحث من اینجا آموزش نیست ولی بهرحال زمان طلاست.
همین الان یه پروژه استارت بزنید ببینید چقدر طول میکشه که یه ساختار اولیه از پروژه بهتون بده:
npx create-react-app cra-sucks
توی آخرین تستی که من گرفتم بدون typescript حدودا ۴ دقیقه و ۴۰ ثانیه طول کشید.
یه نکته خیلی ظریفی که وجود داره اینه که وقتی شما با CRA پروژه رو استار میزنید تا زمانی که همه پکیج ها رو نصب نکرده به شما اجازه نمیده که برید داخل فولدر پروژه و کارتون رو شروع کنید. یعنی در تمام طول مدتی که داره کارشو انجام میده هنوز چیزی ایجاد نشده و تازه بعد از تقریبا ۵-۶ دقیقه میتونید وارد فولدر بشید.
بعد اینکه پروژه تون ایجاد شد، npm به صورت خودکار یه بار همه پکیج های نصب شده رو audit میکنه و اگه پکیجی باشه که آسیب پذیری شناخته شده ای داشته باشه، تعداد پکیج های مشکل دار رو به ترتیب اهمیت شون به شما نشون میده. یه چیزی شبیه این:
از اونجایی که وقتی با CRA کار میکنید کلی پکیج outdated و غیر ضروری نصب میکنه تعداد این آسیب پذیری ها هم خیلی بالاست. البته تو نسخه های جدید تر این مشکل تا اندازه خوبی رفع شده ولی در مقایسه با بقیه مباحثی که میخوام بهشون اشاره کنم هنوزم استفاده از CRA عاقلانه نیست.
نمیدونم این معیار درستی هست جنرالی یا نه ولی برای من مهم بود برای همین هم میخوام بهش اشاره کنم. بعد ایجاد یه پروژه معمولی با CRA (یعنی بدون TypeScript) حجم فولدر node_modules به عدد قابل توجه
۱۵۲.۹ مگابایت میرسه و تازه این فقط برای template اولیه هست. بدون پکیج هایی که بعدا خودتون اضافه میکنید و اگه پای TypeScript هم بیاد وسط که اوضاع خراب تر هم میشه:
و این اندازه از dependency ها باعث راحت تر شدن چیزی که نمیشه، قابلیت خاصی هم اضافه نمیکنه، دردسرمون هم بیشتر میکنه. برای مثال اگه سعی کنید تو این پروژه یکم مدل کار کردن babel یا هرچیز دیگه رو تغییر بدید متوجه میشید که عملا از راه درستش ممکن نیست.
تو نکته بعدی در موردش توضیح دادم.
بعد اینکه همه dependency ها نصب شد شما با یک پروژه خام طرف هستید که هیچکار خاصی هم انجام نمیده. فقط یه boilerplate سادست برای اینکه بیاید پروژه تون رو بسازید. حالا اگه مثلا بخواید کانفیگ خاصی انجام بدید، مثلا tailwind یا styled-components یا حتی یه loader جدید برای Webpack اضافه کنید، از راه درستش نمیتونید اینکارو بکنید.
این راه درست که میگم یعنی یه راه official که توی خود داکیومنت CRA بهش اشاره شده باشه و نیازی به نصب پکیج دیگه ای نباشه. فقط به یکی دو تا مطلب بسنده کرده مثل این که به نظر من چرخوندن لقمه دور گردنه.
تو کِیس من اینکار رو با react-app-rewired انجام دادم که بتونم کانفیگ خودم رو ایجاد کنم ولی دیدم که ابزار دیگه ای هم هست به اسم craco که کار مشابه رو انجام میده.
البته اینا همه در حالتی هست که پروژه ری-اکت تون رو نمیخواید eject کنید و اگه اینکارو انجام بدید عملا دیگه همه چیز دست خودتونه.
کلا همه چیز خیلی black box هست و برای شما امکان این وجود نداره که عین بچه آدم کانفیگ خودتونو انجام بدید براش، چرا باید اینطور باشه؟ یعنی بعد این همه مدت متوجه نشدن نیاز کامیونتی رو؟ البته تنها دلیلی که من به ذهنم میرسه اینه که این ابزار برای تازه کار هاست که نمیخان درگیر کانفیگ های عموما پیچیده webpack بشن.
سرعت بیلد نهایی بعضی اوقات واقعا طولانی میشه، البته به خیلی پارامتر ها مثل قدرت سیستم و تعداد پکیج ها و کانفیگ webpack و ... بستگی داره ولی وقتی رو یه پروژه فرضی امتحان کردم تقریبا سرعت بیلدش نسبت به بقیه ابزار ها مثل Vite حدود ۲ برابر بیشتر بود. حجم خروجی باندل ولی تفاوت زیادی نمی‌کرد. این دلیل خیلی مهمی نیست البته به نظرم ولی حیفم اومد که بهش اشاره نکنم.
توی این مطلب به این اشاره کردم که چرا بهتره از CRA به عنوان یه ابزار استفاده نکنیم. توی مطلب بعد در مورد Vite صحبت میکنم و اینکه چرا بهتره از اون به عنوان جایگزین استفاده کنیم. پس حتما ادامه این مطلب رو بخونید:
