코드 분할(조각)

1. 코드 조각(spliting)

코드 나누기로 배포 전 코드를 나누어서 애플리케이션의 성능을 최적화 하는 것을 말한다. 나누어진 코드를 청크(chunk)라고 한다.

코드 조각이란?

위의 그림을 보고 아래 import() 문법의 코드를 보면 이해가 훨씬 쉽다.

2. import() 문법

Before

import { add } from './math';

console.log(add(16, 26));

After

import("./math").then(math => {
  console.log(math.add(16, 26));
});

3. 청크(chunk)란?

어느 큰 덩어리(조각)를 나타낸다. 조각이라고 하니 컴포넌트와 같은 역할을 하는 거라고 오해 할 수 있지만 컴포넌트 처럼 독립적으로 사용할 수 없다.

청크란?

4. 참고

• React import() 코드 분할