۸ قدم برای حرفه‌ایی شدن در React (قسمت دوم)

در قسمت قبلی درباره ESLint, WebPack و Babel صحبت کردیم و دیدیم که با یه تغییر کوچیک داخل کانفیگ ESLint چقدر میشه تمیز و بهینه تر کد نویسی کرد.
تو این قسمت ویژگی‌های پلاگین transform-class-properties و تکنیک Code Splitting را مورد بررسی قرار می‌دهیم.

قسمت سوم:

گفتیم که Babel ماشین تبدیل کد به حساب میاد

از همین ویژگی میشه برای کمتر کد زدن و صرفه جویی در وقت و هزینه استفاده کرد. چه طوری ؟
اول از همه پلاگین transform-class-properties را نصب می‌کنیم:

npm install babel-plugin-transform-class-properties --save

بعدش در ریشه پروژه یک فایل به نام .babelrc ساخته و پلاگین را در آن فراخوانی می‌کنیم:

از این به بعد برای defaultProps, propTypes, initialize state, و bind کدن لازم نیست سختی بکشیم :)

اتفاقی که پشت صحنه رخ میده اینکه کد شما در زمان build شدن به حالت اصلی خودش که مطابق عکس اول هستش تبدیل میشه.

تفکیک کد یا Code Splitting چیست ؟

تفکیک کد، تکنیکی برای کمتر کردن حجم برنامه شما و درنتیجه بازگذاری سریع‌تر و افزاریش رضایت مشتری و داشتن SEO بهتری است.

در حالت عادی وقتی برنامه React شما build میشه خروجی شما یک فایل bundle.js هست که داخل اون از تمامی پکیچ‌هایی که استفاده کردید تا کدهای برنامه که خودتون نوشتید قرار داره.

اما مشکل کجاست ؟

• شما کافیه یکی از پکیج‌هایی که استفاده کردید رو بروز کنید، کاربر مجبوره تمام bundle.js رو دوباره دانلود کنه (فقط برای یک آپدیت ساده یکی ‌از هزاران پکیجی که داخل node_modules قرار داره)
• کاربر برای دیدن صفحه مقالات علاوه بر کد صفحات خانه، سبد خرید، درباره ما، تماس با ما، فروشگاه، باید پکیج‌های استفاده شده داخل این صفحات رو دریافت کنه در صورتی که اصلا لزومی نداره :)

جالبه نه ؟! جالب ترم میشه :))
یادتونه گفتیم WebPack کل برنامه شما رو یک فایل میکنه، اینجاست که ازش می‌خوایم اینکارو نکنه (البته تا حدودی)

اول از همه پکیج‌هایی که لازم داخل کل برنامه وجود داشته باشن (مثل: react و react-dom و react-redux و react router-dom و redux و ...) رو از مابقی فایل‌ها جدا می‌کنیم (اصطلاحا Vendor Splitting می‌کنیم)

دوم با استفاده از پکیج‌های مختلفی که وجود داره تفکیک کد رو در سطح کامپوننت یا در سطح مسیر (Route Level) انجام میدیم. (بدون استفاده از پکیج اینکار امکان پذیر هستش ولی خیلی کثیف کاری داره)

پیش نیاز اصلی Webpack 2 و یا نسخه جدیدتر هستش
برای تفکیک کد در سطح Component و Route از پکیج react loadable استفاده کنید.

اما برای Vendor Splitting باید خودمون دست به کار بشیم و webpack رو کانفیگ کنیم. (توجه داشته باشید بسته به نوع setup که استفاده کردید این کانفیگ ممکنه کمی نیاز به تغییر داشته باشه)

اگر از create-react-app استفاده می کنید باید یکبار برنامه را eject کنید و config.webpack را به صورت زیر تغییر دهید

در آخر حداقل خروجی شما ۳ فایل manifest.js و vendor.js و chunk.[x]:hash.js خواهد بود که

• فایل vendor:که در آن پکیج‌های اصلی برنامه شما که وجود آنها در تمامی کامپوننت‌ها الزامی است، قرار دارد.
• فایل manifest.js که وجود این فایل برای Dynamic Load شدن chunk ها الزامی است، در اصل این فایل مشخص می‌کند component X در کدام فایل وجود دارد که مرورگر در زمان مورد نیاز آنرا بارگذاری می‌کند.
• و chunk ها که کد هر صفحه (خانه، فروشگاه، سبد خرید، و ...) را در خود دارد و برنامه شمارا به قسمت های کوچکتر تقسیم می‌کند.

ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگه‌ایی تکمیل کنم و لینکش رو همینجا قرار بدم
تا اون موقع این چندتا لینک رو مطالعه کنید:

خوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و آیا شما شروع به تغییر دادن کد خودتون می‌کنید؟ و اول از کدوم قسمت شروع می‌کنید :)

قسمت سوم: