번들링

번들링은 여러파일을 하나의 파일로 병합하는 것을 말한다. 대표적인 번들러는 webpack이 있다. 번들된 파일은 리소스 요청 횟수를 줄일 수 있지만 앱이 커짐에 따라 번들된 파일이 커지게 된다. 사이즈가 커진 파일은 로드 시간을 늘려 사용자 경험을 저해할 수 있기 때문에 조심해야 한다. 커진 파일을 줄이는 방법이 코드 분할이다.

코드 분할

코드 분할을 webpack과 같은 번들러에서 제공하고 lazy 로딩을 통해 성능을 향상 시킬 수 있다.

Import()

앱의 코드를 분할하는 대표적인 방법은 import()의 활용이다.

Before

import { add } from "./math";
console.log(add(1, 2)) // 3

After

import('./math').then(math => {
	console.log(math.add(1,2)) // 3
});

Webpack이 이 구문을 만나면 코드를 분할한다. import()메소드는 promise를 리턴하여 비동기적으로 처리할 수 있게 된다.

React.lazy

이 메소드는 컴포넌트를 동적으로 import할 수 있다.

Before

import OtherComponent from './OtherComponent';

After

const OtherCompoent = React.lazy(() => import('./OtherComponent'));

MyComponent가 처음 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러온다.