[React] Code Splitting (코드 분할)

Code Splitting (코드 분할)

 

CRA 나 Next.js 와 같은 툴을 사용한다면 이미 App 자체에 Webpack 이 설치되어 있을 것이다.

 

'흩어져 있는 파일들을 압축하여 bundling size를 줄인다.'라는 명목 자체는 매우 훌륭하지만,

앱이 커질수록 해당 번들도 커질 가능성이 농후하다.

특히 큰 사이즈의 3rd party library를 사용하였을 때는 번들 사이즈 또한 커지기 때문에 로드 시간이 길어지고 이는 곧 웹서비스의 성능에 악영향을 끼친다.

번들이 거대해지는 것을 방지하기 위해서 code splitting을 고민해보아야 한다. 코드분할은 앱을 지연로딩(lazy-loading) 하게 도와주고, 이는 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 initializing에 필요한 loading resource 자체를 줄여준다.

 

 

예시

import()

- 애플리케이션에 code splitting을 도입하는 가장 좋은 방법은 동적 import() 구문을 이용하는 것이다.

 

 

전

import { add } from './math';

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

 

 

후

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

Webpack 이 해당 구문을 만나게 되면 자체적으로 앱의 Code를 Splitting 한다.

하지만, Babel을 사용한다면 Babel 은 위와 같은 동적 import를 인식할 수는 있지만, 자체적으로 분할하지는 않는다. 그에 따라, babel-plugin-synyax-dynamic-import를 사용해야만 한다.

 

❗️하지만 ❗️

Create React App을 사용한다면 이미 설정되어 있어 사용할 수 있다. Next.js에서도 지원된다.

 

 

 

마무리

Bundling 툴은 보통 코드를 압축하기에 이에 따른 import 하는 과정에서 너무 많은 리소스를 낭비할 수 있기에,

이 부분에 대해서는 code splitting 이 유용하게 쓰인다. 

 

 

 

참고

https://velog.io/@odini/Code-Splitting코드-스플릿팅#reactlazy

https://ko.legacy.reactjs.org/docs/code-splitting.html

https://hwani.dev/react-code-splitting/