ဖြေရှင်းထားသည်- router ပျင်းရိခြင်းကို တုံ့ပြန်သည်။

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function App() { 

  return ( 

    <Router> 

      <Suspense fallback={<div>Loading...</div>}>

        <Switch>  

          <Route exact path="/" component={Home} />  

          <Route path="/about" component={About} />  

          <Route path="/contact" component={Contact} />  

        </Switch>  

      </Suspense> 

    </Router>  ); } export default App;

}> // ဤသည်းထိတ်ရင်ဖိုတက်ဂ်သည် ကျွန်ုပ်တို့၏လမ်းကြောင်းအားလုံးကို Loading ၏နောက်ပြန်ထောက်ကူပစ္စည်းများဖြင့် ချုပ်ပေးသည်... မည်သည့်လမ်းကြောင်းမှ တင်ရန် အချိန်ကြာမြင့်ပါက၊

7. //Switch tag သည် လမ်းကြောင်းတစ်ခုသာ တစ်ပြိုင်နက် ပြန်ဆိုကြောင်း သေချာစေမည်ဖြစ်သည်။

8. // လမ်းကြောင်းအတိအကျ “/” ကိုက်ညီသောအခါတွင် ဤလမ်းကြောင်းသည် မူလအစိတ်အပိုင်းကို တင်ဆက်ပေးမည်ဖြစ်သည်။

9. // လမ်းကြောင်း “/about” နှင့် ကိုက်ညီသောအခါတွင် ဤလမ်းကြောင်းသည် အစိတ်အပိုင်းအကြောင်း အကြောင်းပြန်ဆိုပါမည်။

10 ။ // ဤလမ်းကြောင်းသည် “/contact” လမ်းကြောင်းနှင့် ကိုက်ညီသောအခါတွင် အဆက်အသွယ် အစိတ်အပိုင်းကို တင်ဆက်ပေးမည် ) } မူရင်းအက်ပ်ကို ထုတ်ယူပါ။ // နောက်ဆုံးတွင် ကျွန်ုပ်တို့သည် tag အားလုံးကိုပိတ်ပြီး ကျွန်ုပ်တို့၏အက်ပ်ကို တင်ပို့သည်။

Lazy load ပြဿနာ

Lazy loading သည် အချို့သော အစိတ်အပိုင်းများ လိုအပ်သည့်အချိန်အထိ တင်ဆောင်ခြင်းကို နှောင့်နှေးစေရန် အသုံးပြုသည့် နည်းလမ်းတစ်ခုဖြစ်သည်။ ၎င်းသည် သတ်မှတ်အချိန်အတွင်း လိုအပ်သောအရာများကိုသာ တင်ခြင်းဖြင့် အပလီကေးရှင်းတစ်ခု၏ စွမ်းဆောင်ရည်ကို မြှင့်တင်ပေးနိုင်ပါသည်။ သို့သော်လည်း React Router ကိုအသုံးပြုသောအခါတွင် ၎င်းသည် ပျင်းရိသောပုံးမှတင်ခြင်းအား မပံ့ပိုးနိုင်သောကြောင့် ၎င်းသည် ပြဿနာရှိနိုင်သည်။ ဤပြဿနာကိုဖြေရှင်းရန်၊ ဆော့ဖ်ဝဲရေးသားသူများသည် ပျင်းရိသော loading ကိုဖွင့်ရန် ၎င်းတို့၏လမ်းကြောင်းများကို ကိုယ်တိုင် configure လုပ်ရပါမည်။ ၎င်းတွင် ရှုပ်ထွေးပြီး အချိန်ကုန်စေသော လုပ်ဆောင်စရာများဖြစ်သည့် ရွေ့လျားတင်သွင်းမှုနှင့် ကုဒ်ခွဲခြမ်းခြင်းတို့ကို သတ်မှတ်ခြင်းတွင် ပါဝင်နိုင်သည်။ ထို့အပြင်၊ React Loadable ကဲ့သို့သော အချို့သော စာကြည့်တိုက်များကို React Router ဖြင့် ပျင်းရိသော loading ကို မှန်ကန်စွာ အကောင်အထည်ဖော်ရန်အတွက် အသုံးပြုရန် လိုအပ်ပါသည်။

React lazy load ဆိုတာဘာလဲ

React lazy load သည် လိုအပ်ချက်အရ အစိတ်အပိုင်းများကို တင်ဆောင်နိုင်စေသည့် React Router ၏ အင်္ဂါရပ်တစ်ခုဖြစ်သည်။ ဆိုလိုသည်မှာ အစိတ်အပိုင်းအားလုံးကို တစ်ကြိမ်တည်းတင်မည့်အစား လိုအပ်သည့်အခါတွင် လိုအပ်သောအစိတ်အပိုင်းများကိုသာ တင်မည်ဖြစ်သည်။ ၎င်းသည် ကနဦးစာမျက်နှာတင်ချိန်ကို လျှော့ချရန်နှင့် စွမ်းဆောင်ရည်ကို မြှင့်တင်ရန် ကူညီပေးသည်။ အစိတ်အပိုင်းတစ်ခုစီကို လွတ်လပ်စွာ တင်နိုင်သောကြောင့် ပိုမိုကောင်းမွန်သော ကုဒ်အဖွဲ့အစည်းနှင့် စိုးရိမ်မှုများကို ပိုင်းခြားရန်လည်း ခွင့်ပြုပါသည်။

ကျွန်ုပ်၏ router တွင် React lazy ကို မည်သို့အသုံးပြုရမည်နည်း။

React lazy သည် အစိတ်အပိုင်းများကို အင်တိုက်အားတိုက် တင်သွင်းခွင့်ပြုသည့် React ၏ အင်္ဂါရပ်တစ်ခုဖြစ်သည်။ ဆိုလိုသည်မှာ အစိတ်အပိုင်းအားလုံးကို အစောကြီးတင်မည့်အစား လိုအပ်သလို တင်နိုင်သည်။ ၎င်းသည် ကြီးမားသော အပလီကေးရှင်းများတွင် စွမ်းဆောင်ရည်ကို အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ရန်အတွက် အသုံးဝင်နိုင်သည်။

React Router တွင် သင့် router တွင် React lazy ကို အသုံးပြုရန်အတွက်၊ သင်သည် dynamic import call တွင် သင်ပျင်းရိနေလိုသော အစိတ်အပိုင်းကို ခြုံထားရန် လိုအပ်သည်။ ဥပမာ:

const MyComponent = React.lazy(() => import('./MyComponent'));

ထို့နောက် သင့်လမ်းကြောင်းများကို သတ်မှတ်သည့်အခါ၊ MyComponent အစိတ်အပိုင်းကို ထိုကဲ့သို့သော Route အစိတ်အပိုင်းထဲသို့ ဖြတ်သန်းပါ။

၎င်းသည် React Router သည် ထိုလမ်းကြောင်းသို့သွားသည့်အခါ MyComponent အစိတ်အပိုင်းကို ဒိုင်းနမစ်တင်နိုင်စေသည်။