코드 스플리팅

webpack에서 제공하는 기능이다. 코드를 다양한 번들로 분할하고, 요청에 따라 로드하거나 병렬로 로드할 수 있다. 일반적으로 세가지 방법이 있다.

1. Entry Points → entry 설정을 사용하여 코드를 수동분할

webpack.config.js 에서 설정할 수 있다.

1. Prevent Duplication → Entry dependencies / SplitChunksPlugin 을 사용하여 중복 청크를 제거하고 청크를 분할한다.

옵션 적용을 통해 중복 의존성을 제거할 수 있다.

1. Dynamic Imports → 모듈 내에서 인라인 함수 호출을 통해 코드를 분할한다.

ECMAScript 제안에 따른 import() 구문 사용

→ import 구문은 Promise를 반환

→ CommonJS 명세를 따르기 때문에 import 하는 파일의 export default 를 {default: ... } 로 받아야 한다.

→ 비동기적으로 chunk를 로드할 수 있다.

→ 컴포넌트를 로드할 경우에는 컴포넌트 자체를 state에 넣는 방식으로 구현해야 한다.

React.lazy, Suspense 사용하는 방식 (React 16.6 버전 이후 도입)

1. React.lazy

컴포넌트를 렌더링하는 시점에 비동기적으로 로드하도록 하는 유틸함수