[React공식문서읽기] 코드분할

번들링

대부분 React Application은 Webpack Rollup또는 Browserify와 같은 tool을 사용하여 여러 파일을 병합하여 bundling할 수 있다. (Webpack에 대하여 추후 포스팅할 계획)

코드분할

Application이 커질수록 Bundle도 커진다. 큰 규모의 서드파티 라이브러리를 추가할 경우 loading시간이 길어짐에 대한 고려가 필요하다.

Bundle이 거대해지는 것을 방지 하기 위한 좋은 해결 방법은 코드분할을 통해번들을 나누는 것이다.

webpack, Rollup과 Browserify(factor-bundle)과 같은 번들러가 지원하는 기능이다.

코드분할을 통해 Application을 성능향상을 도와준다. (코드 량을 줄이지 않으면서 사용자가 필요하지 않은 코드를 불러오지 않게 하며, Application의 초기화 Loading에 필요한 비용을 줄여준다.

(소스코드를 import하여 코드분할을 한다.)

React.lazy함수를 사용하여 동적으로 컴포넌트를 가져올 수 있다.

const othorComponents = React.lazy(() => import('./OtherComponents'));

OtherComponents를 불러오는 컴포넌트가 처음 렌더링 될 떄 자동으로 bundle을 불러 온다.

React.lazy는 동적 import를 호출하는 함수를 argument로 가진다.

React컴포넌트를 포함한 default export 를 가진 module로 결정 되는 promise를 반환하여야 한다.

Error bounderies

장애를 만날 경우 다른 module을 load하는데 실패할 경우가 있을 수 있다. 이럴 경우 Error발생 시켜 User에게 알릴 수 있다.

이럴 경우 ErrorBounderiss를 이용하여 User의 경험과 복구 관리를 처리할 수 있다.

 

ko.reactjs.org/docs/code-splitting.html

코드 분할 – React