🌟React lazy()

Not Hook But useful in react

ကျတော်တို့ react component တွေရေးတဲ့အခါမှာ performance တွေကို ဦးစားပေးပြီးတော့ ရေးကြရပါတယ်

အဲအတွက်ကြောင့် ကျတော်တို့ ရဲ့ application တစ်ခုက ဘယ်လောက်အထိ မြန်မြန်ဆန်ဆန် loading လုပ်နိုင်တာလည်း

က စတင်ပြီးတော့ အရေးပါလာခဲ့ပါတယ်

အခုပြောသွားမယ့်အကြောင်းအရာကတော့ react ရဲ့ performance improve method တခုဖြစ်တဲ့ lazy() load

လေးပါပဲ

အဲကောင်လေးကို ကျတော်တို့က ဘယ်လိုနေရာမျိုးမှာအသုံးများကြတာလည်းဆိုတော့

route component တွေရေးတဲ့အခါမှာ အသုံးများကြပါတယ်

ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော် မြင်သာဆုံး တခုနဲ့ ပြပါမယ်

အရင်ဆုံး ကျတော်တို့အရင်က lazy နဲ့မသုံးခဲ့တဲ့ application ကို build လုပ်လိုက်ကြရအောင်ဗျ

ဘယ်လိုမျိုးလုပ်ရမှာလည်းဆိုတော့

npm run build 

အဲကောင်လေးကို terminal မှာ run ပြီးတော့ ခနလောက်စောင့်ပေးလိုက်ပါ

ကျတော်တို့ dist ဆိုတဲ့ folder လေး ပေါ်လာတာကိုမြင်ရပါလိမ့်မယ်

အဲဒီ dist ဆိုတဲ့အထဲကိုဝင်ကြည့်တဲ့အခါမှာ ဒီလိုလေးမြင်ရပါလိမ့်မယ်

သူ့အထဲမှာပါတဲ့ assets ထဲကို ဝင်ကြည့်ရင် js file လေးက တဖိုင်တည်းဖြစ်နေတာကိုမြင်ပါလိမ့်မယ်

အဲဒီအခါကျတော်တို့က dist ဆိုတဲ့ file လေးကို hosting လုပ်လိုက်ရင် ကျတော်တို့ရဲ့ react project က

အလုပ်လုပ်တာကိုမြင်ရပါလိမ့်မယ်

ကျတော်ပြောချင်တာက ဒီအချိန်မှာ ကျတော်တို့က hosting ထဲကိုဝင်လိုက်တဲ့အခါမှာ

ပထမဦးဆုံး loading က အရမ်းကြာသွားချင်ကြာသွားနိုင်တယ်

အခုရေးထားတဲ့ project ကအရမ်းသေးနေလို့သာ သိပ်မသိသာပေမယ့်အရမ်းကြီးလာတဲ့အခါကျရင် ကျတော်တို့ ရဲ့ site

က ဝင်ဝင်ချင်းမှာ အကြာကြီးစောင့်နေရတာမျိုးတွေကိုဖြစ်လာပါလိမ့်မယ် အဲအတွက် ကျတော်တို့က lazy လေးကို

အသုံးပြုကြတာပါ

ဘယ်လိုမျိုးအသုံးပြုကြတာလည်းဆိုတော့

အရင်ဆုံး ကျတော်တို့ lazy ကို import လုပ်လိုက်ပါမယ်

ကျတော်တို့ lazy ကို react ကနေပြီးတော့ import လုပ်တဲ့အခါမှာ နောက်ထပ် တခုလည်း ထည့်ပေးဖို့လိုပါတယ်

အဲဒါက ဘာလည်းဆိုတော့ ကျတော်တို့ရဲ့ site route တခုနဲ့ တခု အပြောင်းအလဲမှာ ကျတော်တို့က request ထပ်လုပ်ပေး

ရတာဖြစ်တဲ့အတွက်

အဲဒါကို ကြားခံအနေနဲ့ loading page လေးတစ်ခုကိုရေးပေးရပါတယ်

အဲကောင်ကိုအသုံးပြုဖို့အတွက် Suspense ဆိုတာလေးကိုပါ import လုပ်ရပါတယ်

အရင်ဆုံး ရေးလိုက်ကြည့်ရအောင်