코드 분할 (Code Spliting)

e-pong:)·2022년 11월 28일

코드 분할이란?

코드 분할 등장 배경

대부분 React 앱들은 Webpack과 같은 툴을 사용해 번들링한다. 이렇게 하면 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있기 때문이다. 번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 페이지를 설정하는 데 필요한 호출 수가 적은 링크 태그 하나만 필요하게 된다.

그러나, 이제는 브라우저 JavaScript 엔진이 해석해야 하는 코드 양이 많아지게 되면서 번들링 할 때 특정 지점에서 코드를 해석하고 실행하는 정도가 느려질 수 있다.
모던 웹으로 발전하면서 점점 DOM을 다루는 정도가 정교해지며, 코드 자체가 방대해지고 무거워졌기 때문이다.

"그렇다면 어느 페이지에서 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러올 수 있지 않을까?"

번들 분할 혹은 줄이는 법

번들링 되는 파일에는 서드파티(Third Party) 라이브러리도 포함이 된다.
서드파티 라이브러리는 사용자에게 다양한 메소드를 제공하기 때문에 코드의 양이 많고, 번들링 시 많은 공간을 차지한다. 따라서 사용 중인 라이브러리의 전부를 불러와서 사용하는 것보다 따로 불러와서 사용하는 것이 좋다.

/* 이렇게 lodash 라이브러리를 전체를 불러와서 그 안에 들은 메소드를 꺼내 쓰는 것은 비효율적입니다.*/
import _ from 'lodash';

...

_.find([]);

/* 이렇게 lodash의 메소드 중 하나를 불러와 쓰는 것이 앱의 성능에 더 좋습니다.*/
import find from 'lodash/find';

find([]);

React에서의 코드 분할

React는 SPA(Single-Page-Application)인데, 사용하지 않는 컴포넌트까지 한 번에 불러오기 때문에 첫 화면이 렌더링 될때까지의 시간이 오래걸린다.
그래서 사용하지 않는 컴포넌트는 나중에 불러오기 위해 코드 분할 개념을 도입했다.

React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것이다.

그 전까지는 코드 파일의 최상위에서 import 지시자를 사용해 사용하고자 하는 라이브러리 및 파일을 불러오는 방법을 사용했다. 이를 static import(정적 불러오기)라고 한다.

1) Static Import

/* 기존에는 파일의 최상위에서 import 지시자를 이용해 라이브러리 및 파일을 불러왔습니다. */
import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  /* 그리고 코드 중간에서 불러온 파일을 사용했습니다. */
}

import 구문은 문서의 상위에 위치해야 했고, 블록문 안에서는 위치할 수 없는 제약 사항이 있다.
왜냐하면 번들링 시 코드 구조를 분석해 모듈을 한데 모으고 사용하지 않는 모듈은 제거하는 등의 작업을 하는데, 코드 구조가 간단하고 고정되어 있을 때에야만 이 작업이 가능하기 때문이다.

그러나 이제는 구문 분석 및 컴파일러해야 하는 스크립트 양을 최소화하기 위해 dynamic import 구문을 지원한다.

2) Dynamic Import

form.addEventListener("submit", e => {
  e.preventDefault();
	/* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    /* moduleA를 여기서 사용합니다. */
}