SReza S
SReza S
خواندن ۲ دقیقه·۴ سال پیش

ریکت - ارتقاع پرفرمنس با جلوگیری از بارگیری بیهوده صفحات



با استفاده از Route و مقدار دهی path برای ساخت مسیر های اپلیکیشنتون

<BrowserRouter> <Route path=&quot/ask&quot component={AskPage} /> </BrowserRouter>

با اولین بارگذاری سایت، تمام صفحه های نام برده شده از این طریق، دانلود میشن و با ورود بهشون دیگه درخواستی برای گرفتن محتوای اون صفحه ارسال نمیشه.


در اپلیکیشن ها یا کامپوننت های کوچک این مورد مشکلی به وجود نمیاره ولی فرض کنید اگر اپلیکیشن ما بزرگ باشه و داخل هر صحفه چند WebApi صدا زده بشه؛ برای بارگیری اولیه سایت چقدر زمان گرفته میشه! کمااینکه مخاطب ممکنه به هیچکدوم از صفحات بارگیری شده نیازی نداشته باشه!!


در ادامه بهترین روش برطرف کردن این ایراد رو بررسی میکینم...




پـروژه اسـتارترپـک در یـک نـگاه :)

https://gist.github.com/srezasm/1bf58886aecf04f002b4710d9f9cdee5




1. ابتدا کامپوننت AskPage رو به صورت دیفالت اکسپورت میکنیم:


2. در App.js بجای ایمپورت معمولی، کامپوننت AskPage رو با استفاده از فانکشن lazy ایمپورت میکینم:

توجه داشته باشید که این عبارت باید در انتهای بقیه ایمپورت ها قرار بگیره. در غیر این صورت ESLint بهمون گیر میده!


بعد اعمال تغیرات بالا ریکت تلاش میکنه AskPage رو طبق معمول در اولین بارگذاری صحفه بارگیری کنه ولی چون React.lazy این اجازه رو نمیده خطای زیر برگشت داده میشه:


3. با توجه به ارور بالا Route مربوط به کامپوننت AskPage رو تغیر میدیم

با استفاده از کامپوننت React.Suspense از بارگیری کامپوننت به محض اجرای سایت جلوگیری میکنیم.

اتریبیوت fallback به ما اجازه میده در هنگام لود یک کامپوننت رو نمایش بدیم که در این مثال متن Loading... نمایش داده میشه.

در آخر هم کامپوننت AskPage فراخوانی میکنیم.




پـروژه بعد از تغـیرات :)

https://gist.github.com/srezasm/8f4b5dc5f5c7d1e362b83a503df3dc12





تسـت عملکـرد پروژه :)

با اجرای پروژه فقط یک لینک که مارو به ادرس /ask هدایت میکنه قابل روئیت هست:


و وقتی روی لینک کلیک میکنیم...

لودینگ به نمایش در میاد و سپس ...

یک درخواست از نوع GET محتویات کامپوننت AskPage رو میگیره و صفحه بروزرسانی میشه


حالا بیاین یک نگاه به هدر و پریویو درخواست بندازیم

درخواست گت موفقیت آمیز با مقدار بازگشتی از نوع javascript
درخواست گت موفقیت آمیز با مقدار بازگشتی از نوع javascript


محتویات فایل jsx کامپایل شده به js به همراه مقداری اطلاعات دیگه
محتویات فایل jsx کامپایل شده به js به همراه مقداری اطلاعات دیگه



در آخر مجددا یاد آوری میکنم؛ این مثال فقط جنبه ی نمایشی داره و همچین کاری برای لود اطلاعات کامپوننت کوچکی مثل AskPage بیهوده هست و چه بهتر که بلافاصله بعد از بارگذاری صفحه اطلاعاتش دانلود بشه!




ممکنه از این مقاله ها هم خوشتون بیاد :)

https://virgool.io/JavaScript8/%D8%A7%D9%86%D9%BE%DB%8C%D8%A7%D9%85npm-%D8%AF%D8%B1-1500-%DA%A9%D9%84%D9%85%D9%87-htiagsi9cnvf
https://virgool.io/@srezas/upgrade-react-performance-khoyidl1xij6
https://virgool.io/@srezas/js-tips-wp9tbm6u9xt6
https://virgool.io/@mhmda_83/15-%DA%A9%D9%84%DB%8C%D8%AF-%D9%85%DB%8C%D8%A7%D9%86%D8%A8%D8%B1-vscode-hzenvzw4zw1y




منبع: کتاب Asp.net Core 3 and React از انتشارات فوق العاده Packt

ریکتreact routesارتقاع پرفرمنسنکات برنامه نویسیreact
داشجوی علوم کامپیوترم و به فضای اوپن‌سورس، ماشین‌لرنینگ و بیت‌کوین علاقه‌مندم.
شاید از این پست‌ها خوشتان بیاید