[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