Code splitting

Code splitting

CRA로 만든 React App은 Webpack이 함께 설치된다. 따라서 번들링 시 Webpack에 의해 자동으로 번들링이 된다.
App의 크기가 증가되면 자연스레 번들의 크기도 커지게 된다. 즉 App이 Load 되는 시간 역시 비례하여 증가하게 된다.

이러한 단점들을 보완하기 위해 코드 분할 을 활용하여 App의 성능을 개선하고 사용자에게 좋은 UX를 경험하게 한다.

import

가장 단순한 방법으로 Dynamic import() 을 활용한다.

// 기존의 import와 살짝 다른 모습
const AppTest = React.lazy(() => import("./AppTest"));

Webpack이 위의 구문을 만난다면 Webpack이 자동으로 App의 코드를 분할한다. 즉 CRA를 사용하고 있다면 자연스레 코드가 분할된다.

Lazy

React.lazy로 불러진 Component는 Suspense 하위에서 렌더링 되어야 한다. 따라서 불러오고자 하는 Component가 불러와질 동인 Loading화면에 보여질 Component를 사용자에게 보여준다.

...

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