در قسمت قبلی درباره 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 شدن به حالت اصلی خودش که مطابق عکس اول هستش تبدیل میشه.
تفکیک کد، تکنیکی برای کمتر کردن حجم برنامه شما و درنتیجه بازگذاری سریعتر و افزاریش رضایت مشتری و داشتن SEO بهتری است.
در حالت عادی وقتی برنامه React شما build میشه خروجی شما یک فایل bundle.js هست که داخل اون از تمامی پکیچهایی که استفاده کردید تا کدهای برنامه که خودتون نوشتید قرار داره.
اما مشکل کجاست ؟
جالبه نه ؟! جالب ترم میشه :))
یادتونه گفتیم 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 خواهد بود که
ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگهایی تکمیل کنم و لینکش رو همینجا قرار بدم
تا اون موقع این چندتا لینک رو مطالعه کنید:
خوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و آیا شما شروع به تغییر دادن کد خودتون میکنید؟ و اول از کدوم قسمت شروع میکنید :)
قسمت سوم: