Code Splitting (코드 분할)

---

📌 서론

  최근 프로젝트의 규모가 커짐에 따라 css와 javascript 번들의 크기가 점점 커지게 되었다. 이에 따라 빌드 속도, 화면 진입시 랜더링 시간 등의 문제점이 생기게 되었다. 이러한 문제점들을 개선하기 위한 방식이 코드 스플리팅이다.

  기존 webpack, rollup 등의 번들러 같은 경우 최초 번들링시 모든 파일들을 하나로 묶어 브라우저에 요청했다. 코드 분할은 이 번들링된 컴포넌트나 코드를 여러개로 분리해 해당 페이지에 필요한 특정 소스만 요청해 로드하는 방식이다. 주소에 따라 소스들을 필요에 맞게 비동기로 로딩하는 코드 스플리팅은 브라우저에서 로드하는 초기 javascript의 번들의 크기를 크게 줄일 수 있어 처음 랜더링하는 시간을 단축할 수 있다. 또한 기존 빌드 프로세스의 경우 코드를 한 줄 만 수정해도 모든 파일에 대한 번들링을 거치는 비효율성을 갖고 있었는데, 코드 스플리팅이 적용되면서 해당 페이지에 대한 코드만 번들링하기 때문에 빌드 속도는 개선되고, 기존 파일을 새로 받지 않아도 되는 장점도 갖고 있다.

📌 코드 적용

react의 경우 import 문법을 사용해 코드 스플리팅이 적용 가능하다.

import("./searchBox").then(result => {
  console.log(result);
});

컴포넌트의 경우 React.lazy 함수를 통해 코드스플리팅을 적용할 수 있다.

앞서 설명한 것처럼 코드스플리팅이 적용되지 않았을 경우 첫 화면 진입시 모든 파일들을 가져오게 된다.

여기에 코드 스플리팅을 적용한 경우

const SearchBox = React.lazy(() => import('@components/search/search_box'));

해당 컴포넌트를 lazy하게 호출하도록 route 변수에 선언한다

이런 식으로 이동시 해당 컴포넌트에서 필요로하는 모듈만을 따로 호출할 수 있다.

📌 코드스플리팅이 정답일까?

가만 생각해보면 번들링을 최소화하는 것이 정답만은 아니다. 초기 SPA(Single Page Application)이 대세가 되었던 이유 중 하나는 첫 화면 진입은 느릴지언정 페이지 이동시 사용자가 느끼게 되는 자연스러움과 속도가 장점으로 느껴졌기 때문이다. 코드 스플리팅을 통해 번들러의 역할을 쪼개다보면 초기 번들 속도는 개선될지 몰라도 그만큼 다른 페이지에 이 부담을 줄 수 밖에 없다. 때문에 무분별한 코드 스플리팅은 오히려 독이 될 수 있기 때문에 적절한 조율이 필요하다 생각한다.