✨Import and use lazy & Suspense

import lazy and suspense from react

ကျတော်တို့ အရင်ဆုံး lazy နဲ့ Suspense ကို react ကနေပြီးတော့ importလုပ်လိုက်ပါမယ်

ဘယ်မှာလုပ်ရမှာလည်းဆိုတော့ ကျတော်တို့ route တွေရေးထားခဲ့တဲ့ route ( view ) component

မှာလုပ်ရမှာပါ

လုပ်ပြီးသွားရင် ကျတော်တို့က Route တွေ ကို Suspense ဆိုတဲ့ component နဲ့ အုပ်လိုက်ပါမယ်

အဲမှာ Suspense ဆိုတာက သူ့ရဲ့ child component တွေ အပြည့်အဝ အလုပ်မလုပ်သေးခင်မှာ

fallback ထဲမှာ ကျတော်တို့ရေးထားခဲ့တဲ့ loading state လေးကို ပြပေးနေမှာပါ

ပြီးသွားရင်တော့ Suspense ဆိုတဲ့ အထဲမှာ fallback={ } ဆိုပြီးတော့ ကျတော်တို့ရဲ့ loading လေးကို ရေးလိုက်ပါမယ်

<Suspense fallback={ <h1>Loading...</h1> }>
    // rest of route 
</Suspense>

အဲလိုလေးရေးလိုက်ပြီးသွားရင်ကျတော်တို့က fallback ဆိုတဲ့ props လေးကိုတချက်ပြောပြပါမယ်

ကျတော်ရေးလိုက်တဲ့အထဲမှာကတော့ h1 tag နဲ့ ပဲ အလွယ်လေးရေးလိုက်တာပါ

ကျတော်တို့က သူ့အထဲကို component တခုလုံးထည့်ပေးမယ်ဆိုလည်းရပါတယ်

အဲလိုလေးရေးပြီးသွားရင်တော့ ကျတော်တို့ lazy ဆိုတဲ့ဟာလေးကိုသုံးလိုက်ရအောင်

const Home = lazy(()=> import(/*path to component with string*/))

ကျတော်တို့ အရင်က ကုဒ်တွေကို ဒီလိုလေး update လုပ်လိုက်ပြီးရင်တော့ ကျတော်တို့

Route မှာရေးထားခဲ့တဲ့ element တွေထဲမှာ ထည့်သုံးထားတဲ့ component တွေကိုတော့တချက် ပြန်စစ်ကြည့်ပေါ့

npm run build

ဒီလိုလေးပြန်run ကြည့်တဲ့အခါမှာ ကျတော်တို့ အရင်က တွေ့ခဲ့ရတဲ့ js က file တခုတည်းထွက်လာတော့မှာမဟုတ်တော့

ပါဘူး

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

route တစ်ခုနဲ့ တစ်ခု ပြောင်းသွားတဲ့အချိန်ကျတော့မှ အဲ route အတွက်လိုအပ်တဲ့ js file လေးကိုပဲ fetch လုပ်ပြီးတော့

run စေမှာပါ

အရင်ကဆို သူက ကျတော်တို့ project တစ်ခုလုံးစာရဲ့ js file က တခုတည်း ရှိတာဖြစ်တဲ့အတွက် အဲ js file ကိုအရင်

request လုပ်နေရတဲ့အခါမှာ first time loading က တော်တော်လေး ကြာသွားနိုင်တာမလို့

ဘာကြောင့်ကြာသွားနိုင်တာလည်းဆိုတော့ project က အရမ်းကြီးတဲ့အခါမှာ ကျတော်တို့က js file က

တခုတည်းရှိတော့အဲဒါမရမချင်း site က loading ဖြစ်နေမှာမလို့ပါ

lazy လေးနဲ့ အသုံးပြုပြီးတော့ ရေးပေးတဲ့အခါ ကျတော်တို့ route တခုနဲ့တခုအပြောင်းမှာ loading state လေးပါ

ထည့်ပေးထားတော့ တော်တော်လေး အဆင်ပြေသွားမှာပါ

ဒီလောက်ဆိုရင်တော့ lazy နဲ့ suspense အကြောင်းကို နားလည်သွားမယ်လို့ထင်ပါတယ်