lazy

하나은행 작업을 하는데 처음 본 코드 발견

const Map = lazy(() => import('../views/map'));                                 
const AgentHome = lazy(() => import('../views/agent-home'));

...

return (
    <ThemeProvider theme={theme[common.mode]}>
      <Check />
      <Suspense fallback={<Loading />}>
				//<h1>loading....</h1> 이렇게 해줘도 됨 
        {common.isHana && <Navigation />}
        <Switch>
          <Route exact path={['/map(/sales)?', '/hana/map']} component={Map} />
          <Route path="/agent/:id" component={AgentHome} />
          <Redirect to="/map" />
        </Switch>
      </Suspense>
      <GlobalStyle isHana={common.isHana} />
    </ThemeProvider>
  );                   

lazy 나온 배경

앱이 커지면 번들도 커진다. (여기서 번들이란?) 번들이 거대해지는 걸 방지 하기 위한 좋은 방법

= 번들을 나누자

• 번들링 여러 파일들을 하나의 파일로 묶어 패키징을 시키는 과정
  

다시 돌아가서...

번들을 나눈다 즉 코드를 나눈다.

코드 분할은 지연 로딩하게 도와주고 성능 향상에 도움이 된다

모듈 번들러

자바스크립트 파일들을 각각 분리해서 <script srx ="">... </script> 이런식으로 로드하면 순서에 따라 에러가 발생할 수도 있고.. 불편한 점 생성

이러한 불편점을 해소 시켜준 것이 Webpack!! (FE 프레임워크에서 제일 많이 쓰이는 모듈번들러)

각각의 모듈들에 대해 의존성 관계를 파악하여 그룹핑 해주는데, 이 걸 통해서 여러개로 나뉘어 있는 파일들을 하나로 파일로 묶어줘 불편한 점 해소시켜준다.

앵귤러 뷰등 프레임워크로 작업할 시 내장되어 있는 모든 자원을 번들링 해준다.

• 여기서 모듈이란? 모듈번들러는 여러개로 나뉘어 있는 파일들을 하나로 파일로 묶어줘 불편한 점 해소 각각의 모듈들에 대해 의존성 관계를 파악하여 그룹핑 해주는거임 그러면 lazy를 쓴건 번들이 넘 커져서 만든거임!!!
  

그러탐 코드 분할 에 좋은 방법

• import ()
• **React.lazy

lazy 컴포넌트 주의 사항**

Suspense 컴포넌트 하위에서 렌더링되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안

로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 짜야함 (fallback prop으로)