آموزش جامع Webpack (بخش ششم و پایانی: React Router) — از صفر تا صد



تعداد بازدید ها:
3

در بخش قبلی این سری مطالب با روش ایمپورت دینامیک و افراز کد در Webpack آشنا شدیم. در این بخش React و react-router را به اپلیکیشن خود اضافه می‌کنیم و مسیریابی را بر مبنای افراز کد در اپلیکیشن اجرا می‌کنیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

افزودن React به اپلیکیشن

در این بخش با روش اضافه کردن پشتیبانی JSX روی Babel آشنا می‌شویم. از آنجا که وظیفه transpile کردن بر عهده Weback نیست و Babel این کار را انجام می‌دهد، باید کاری کنیم که بتواند JSX را بخواند و transpile کند.

yarn add @babel/preset-react –dev

این پکیج را به babelrc. اضافه می‌کنیم:


اکنون که همه چیز تنظیم شده است، react را به عنوان یک وابستگی نصب می‌کنیم:

yarn add react react-dom

دستکاری Webpack

در این بخش برخی تغییراتی را که لازم است در Webpack اجرا کنیم مشاهده می‌کنید.

Babel loader

می‌دانیم که قاعده Webpack باید تغییر یابد. همان طور که به خاطر دارید این قاعده تنها امکان ارسال فایل‌هایی را به Babel می‌دهد که نام آن‌ها به js. ختم می‌شوند. اینک regex را طوری تغییر می‌دهیم که ‎.jsx را نیز بپذیرد. jsx. فایل‌هایی هستند که کامپوننت‌های React ما را رندر می‌کنند:


عبارت ?x به این معنی است که به صورت اختیاری می‌تواند در یک مورد مطابقت حاضر شود. این بدان معنی است که قاعده فوق با js. و هم‌چنین با jsx. مطابقت پیدا می‌کند.

در پایان باید کاری کنیم که Webpack بتواند همه فایل‌های jsx. را بدون لزوم به تصریح پسوند برای ایمپورت‌ها resolve کند.

Resolve کردن JSX

در پیکربندی Webpack مقادیر پیوند پیش‌فرض را به jsx. اضافه می‌کنیم:


اینک به جای کد زیر:

react-router

می‌توانید بدون تصریح پسوند، ایمپورت را انجام دهید:

react-router

اکنون شاید بپرسید چرا کاری نمی‌کنیم که پسوندهای تصویر، استایل و مدیا نیز به صورت خودکار Resolve شوند؟

دیدگاه ما این است که اگر یک با یک asset سر و کار داریم، باید صراحتاً اعلام شود که یک asset است و این مسئله را می‌توانیم از روی پسوند دریابیم. مسئله دیگر این است که از تصادم نام جلوگیری می‌کند. مثلاً اگر فایل استایل دارای همان نام کامپوننت باشد یا تصویرهایی هم نام، اما با پسوندهای مختلف مانند png. و ‎.webp داشته باشیم این کار از بروز مشکل جلوگیری می‌کند.

حالت توسعه React

بسته توسعه React بسیار بزرگ‌تر از بسته پروداکشن است. برای این که به ری‌اکت اعلام کنیم باید از کدام یک استفاده کند، باید با استفاده از متغیر NODE_ENV آن را در اختیار Node.js قرار دهیم.

از آنجا که Webpack دیگر از NODE_ENV استفاده نمی‌کند، می‌توانیم از پارامتر mode استفاده کنیم تا این مقدار را در اختیار React قرار دهیم. در ادامه افزونه را در webpack.config.js قرار می‌دهیم:


و آن را به بخش افزونه‌ها اضافه می‌کنیم:


اکنون می‌توانیم از بیلدهای توسعه/پروداکشن ری‌اکت بر اساس نوع تعریف شده استفاده کنیم.

قالب HTML به کامپوننت

ما در سراسر این سری مقالات از یک قالب رشته برای ایجاد HTML استفاده کرده‌ایم، اما اینک زمان آن رسیده است که آن را به یک کامپوننت React تبدیل کنیم. ابتدا نام آن را از index.js به index.jsx تغییر می‌دهیم و محتوا را با استفاده از یک کامپوننت React جایگزین می‌کنیم:


ما اکنون دقیقاً همان اپلیکیشن بخش‌های قبلی را داریم، اما این بار با React ساخته شده است.

مشکل افزایش اندازه bundle

اکنون که کد Vendors را داریم، باید به موضوع دیگری بپردازیم که اندازه bundle اصلی و کپی‌های احتمالی آن است. اگر دستور زیر را اجرا کنید، می‌بینید که قطعه بزرگی از اپلیکیشن را اساساً React تشکیل می‌دهد:

yarn analyse

خوشبختانه Webpack امکان مقداری بهینه‌سازی در اختیار ما قرار می‌دهد.

ما به طور معمول اپلیکیشن‌های خود را به دو bundle تقسیم می‌کنیم که کدهای خودمان و کدهای شخص ثالث هستند. به این منظور یک پیکربندی به فایل webpack.config.js اضافه می‌کنیم:


با اجرای مجدد دستور yarn analyse این بار بسته vendors.js را با هر چیزی که از node_modules درون آن آمده است می‌بینیم.

راه‌اندازی React Router

پس از آن که تلاش کردیم bundle ما بین کد منبع و vendors افراز شود، نوبت آن رسیده است که react-router را راه‌اندازی و نوعی مسیریابی در اپلیکیشن خود تنظیم کنیم. قبل از هر چیز دستور زیر را اجرا کنید:

yarn add react-router-dom

در این زمان می‌توانید history API را روی webpack-dev-servern در فایل package.json فعال کنید و اسکریپت start:dev را به صورت زیر تغییر دهید:

webpack-dev-server --mode=development --history-api-fallback

ایجاد مسیرها

4 ماژول با نوعی کامپوننت درون دایرکتوری modules/ ایجاد می‌کنیم:

React Router

هر صفحه تنها Page $number را تغییر می‌دهد و به صورت Page-$number.jsx نامگذاری می‌کند.  اکنون باید از شر محتوای موجود در فایل index.jsx رها شویم و آن را با مسیرهای خود جایگزین کنیم:


بارگذاری کُند کامپوننت‌ها روی مسیرها

در کد فوق نکته جدیدی وجود ندارد و صرفاً برخی مسیرهای استاتیک تعریف شده است. اما اکنون با استفاده از React.lazy و <Suspense> می‌توانیم بارگذاری کامپوننت را به تأخیر بیندازیم. به این منظور کافی است از ایمپورت دینامیک که در بخش قبلی دیدیم استفاده کنیم و مسیرهای استاتیک را به مسیرهای کُند تبدیل کنیم. بنابراین کد ایمپورت‌های ماژول را به صورت زیر تغییر می‌دهیم:


اگر زبانه Network را در مرورگر خود باز کنید، می‌توانید ببینید که بارگذاری صفحه تنها پس از کلیک کردن لینک اجرا می‌شود. نکته قابل توجه دیگر این است که Webpack هر نوع ماژولی که به صورت دینامیک ایمپورت شده باشد را کَش می‌کند، بنابراین اگر روی لینکی که قبلاً بازدید شده کلیک کنید، هیچ درخواست شبکه مجدداً ارسال نمی‌شود.

پیش‌واکشی صفحه‌های مهم

فرض کنید صفحه‌ای به نام Page-4 برای کسب و کار شما حائز اهمیت بالایی است و می‌خواهید زمانی که کاربر روی آن کلیک می‌کند، در بارگذاری آن تأخیری پیش نیاید. در این حالت از مطلبی که در بخش قبل آموختیم، یعنی پیش‌واکشی (prefetch) این صفحه استفاده می‌کنیم:


در بخش <head> این صفحه چیزی مانند زیر مشاهده می‌کنید:


تحلیل نتایج

React Router

چنان که هنگام استفاده از yarn analyse می‌بینید، صفحه‌ها به چهار بخش کوچک تقسیم شده‌اند که یکی از آن‌ها ماژول importantModule.js را پیش‌واکشی می‌کند. می‌توانید این راهبرد را نه تنها برای مسیرها بلکه برای مسیرهای فرعی بسته به اندازه‌شان انتخاب کنید و انتخاب هوشمندانه‌ای است. در نهایت یک وب اپلیکیشن آماده پروداکشن را داریم. به این منظور یک مسیر کاملاً طولانی پنج بخشی را در این سری مقالات طی کردیم. از این که تا انتهای این سری مقالات با ما همراه بودید، متشکریم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

به عنوان حامی، استارتاپ، محصول و خدمات خود را در انتهای مطالب مرتبط مجله فرادرس معرفی کنید.

telegram
twitter