REACT에서 지연 로딩을 구현하는 방법 | 코드 분할

다음은 간단한 앱 구성 요소입니다.

import Bids from './components/Pages/OnlineAuction/Auctions/Bids'
import { GeneralGoods } from './components/Pages/Galleries/GeneralGoods/GeneralGoods'

class App extends Component {
  render() {
    return (
    <div>
      <BrowserRouter>
      <div>
        <Routes>

            <Route path="/galleries-general-goods" element={<GeneralGoods />} />

        </Routes>
      </div>
      </BrowserRouter>
      </div>
    );
  }
}

export default App;

React는 애플리케이션이 시작되는 즉시 모든 구성 요소를 가져옵니다. 하지만 여기에는 문제가 있습니다.

React는 모든 구성 요소를 로드하는 데 약간의 시간이 걸리며 모든 구성 요소를 가져온 후에만 앱에 액세스할 수 있습니다.
따라서 사이트나 앱의 사용자가 구성 요소 8개 중 7개를 방문하지 않으면 여전히 로드되며 이는 앱 성능에 영향을 미칩니다.

운 좋게도 REACT에서 사용할 수 있는 솔루션이 있습니다.

지연 로딩
필요한 구성 요소를 로드할 시기를 선택할 수 있습니다. 따라서 컴포넌트는 해당 경로를 방문했을 때만 REACT App에 의해 가져옵니다.

다음은 이를 달성하기 위한 5가지 간단한 단계입니다.
1- REACT에서 지연 및 서스펜스를 가져옵니다.

import {lazy, Suspense} from 'react'

2- 가져오기 기능 사용

const myComponent = () => import('./components/myComponent')

3- imports를 lazy()로 래핑합니다.

const myComponent = lazy (() => 
import('./components/myComponent'))

4- Suspense() 안에 반환 값을 래핑합니다.

function App() {
    return (
      <Suspense>
        //ALL YOUR RETURN COMPONENTS HERE
      </Suspense>
)
}

5- Suspense()에 대한 폴백 지정

<Suspense fallback={<div><p>I am Loading</p></div>}
    //ALL YOUR RETURN COMPONENTS HERE
</Suspense>

완전한 구성 요소는 다음과 같아야 합니다.

import {lazy, Suspense} from 'react'
import {Switch, Route} from 'react-router-dom'
const Bids = lazy(() => import('./components/Bids'))
const GeneralGoods = lazy(() => import('./components/GeneralGoods'))

function App() {
    return (
      <Suspense fallback={<div><p>I am Loading</p></div>} >
<Switch>
       <Route path="/bids" exact>
         <Bids />
       </Route>
       <Route path="/goods" exact>
         <GeneralGoods />
      </Route>
</Switch>

       </Suspense>
   )

}

여기까지 오셨다면 정말 감사합니다. 나는 또한 [ ]에 유사한 콘텐츠를 LinkedIn에 게시합니다.