등장배경

• 모던웹으로 발전하면서 javascript 코드가 방대해졌고 번들링시 특정지점에서 실행하는 정도가 느려지게 되었다.
• 특정 페이지에서 느려지는 코드를 파악하여 지금당장 필요한 코드만 불러오고 나중에 쓸 코드는 나중에 불러오는 형식으로 해결해 보고자함.
• 이렇게 하기위해 코드분할을 시도했고 런타임시 여러 번들을 동적으로 만들고 불러오도록 했다.

React에서의 코드분할

• SPA특성상 첫 랜더링 되기까지의 시간이 오래걸린다. 따라서 사용하지않는 컴포넌트를 나중에 불러오기위해 코드분할을 도입했다.
• dynamic import(동적 불러오기)를 사용하여 코드분할을 사용했다.
• 이전에는 static import인 root 파일에서 import를 사용해 라이브러리 파일을 전부불러왔다.

////////////////////
/* Static Import */
////////////////////

/* 기존에는 파일의 최상위에서 import 지시자를 이용해 라이브러리 및 파일을 불러왔습니다. */
import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

////////////////////
/* Dynamic Import */
////////////////////

const someFunction = () => {
  /* 그리고 코드 중간에서 불러온 파일을 사용했습니다. */
}

form.addEventListener("submit", e => {
  e.preventDefault();
	/* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */
 	/* 중간에서 불러오기 때문에 필요한 부분에서 구문분석을 하고        */
    /* 전체라이브러리가아닌 필요한 일부만 불러오기 때문에 속도가 빠르다. */
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    /* moduleA를 여기서 사용합니다. */
}

• dynamic import는 then 함수를 사용해 필요한 코드만 가져 와야한다.
• React에서 dynamic import는 React.lazy와 함께 사용이 가능하다.

React.lazy

• React는 SPA특성상 첫 랜더링 되기까지의 시간이 오래걸린다. 따라서 사용하지않는 컴포넌트를 나중에 불러오기위해 코드분할을 도입했다.
• React에서는 React.lazy로 dynamic import를 구현했다.

/* static import*/
import Component from './Component';

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

React.Suspense

• 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는기능.
• 로딩창이나 화면, 스켈레톤 UI를 구현할 때 사용
• Suspense 컴포넌트의 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 보여질 컴포넌트를 전달해준다.
• Suspense 컴포넌트 하나로 여러 개의 lazy 컴포넌트를 보여줄 수 있다.

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </BrowserRouter>
);

• 위 코드는 페이지가 이동할때 로딩창이 보이지만 이동할 때 마다 보이기 때문에 선택적으로는 적용할 수 없다.
• react.lazy 와 react.suspense는 보통 같이 사용한다.