코드 스플리팅(spliting)

리액프 프로젝트를 실제 서버에 배포할 때는 별도의 빌드 작업을 거쳐야 한다.

자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거해서

파일의 크기를 최소화하고 jsx문법이나 es6 같은 최신 자바스크립트 문법이

브라우저에서 원할하게 동작하도록 트랜스파일 작업을 하기도 한다.

 

일반적으로 이 작업은 웹팩(webpack)이라는 도구가 담당하는데

별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일과

CSS 파일이 각각 하나의 파일로 합쳐진다.

 

그런데 CRA(create-react-app)로 생성한 프로젝트의 경우 SplitChunks 라는

기능이 적용되어 있어 빌드시 node_modules에서 불러온 파일, 일정 크기 이상의 파일,

여러 파일 간에 공유된 파일을 자동으로 분리해서 합쳐놓는다.

실제로 아래 명령으로 빌드를 수행해보면 여러개의 자바스크립트 파일이 만들어진 것을 볼 수 있다.

yarn build

 

위에서 2로 시작하는 파일에는 React, ReactDOM 등

node_modules 에서 불러온 라이브러리 관련 코드가 들어있고

main으로 시작하는 파일에는 직접 프로젝트에서 작성하는 App 같은 컴포넌트 코드가 들어있다.

 

이렇게 자바스크립트 소스를 성격별로 분리해서 파일로 묶을 경우

캐싱효과를 제대로 누릴 수 있게 되는데 이게 무슨 말이냐면..

 

브라우저에서는 기본적으로 한번 불러온 정적인 이미지, 자바스크립트 파일, CSS 파일 등은

캐싱해 놓고 이 후 이를 이용함으로써 로드 속도를 올린다.

즉, 아래와 같은 js 파일이 캐싱된다는 말이다.

<script src="/static/js/2.f431677b.chunk.js">

 

캐싱은 파일명을 기준으로 하기 때문에 일반적으로 js 파일 같은

정적파일의 코드가 변경되었을 경우 빌드단계에서 파일명에 f431677b 와 같은

해시값을 포함시켜서 이전 배포된 것과 다른 파일을 파일명과 겹치지 않도록 한다.

 

이에 자주 변경되지 않는 외부 라이브러리 코드와 자주 변경되는 실제 프로젝트 코드를 

각각 다른 파일로 묶어서 배포할 경우 변경된 코드를 포함하는 파일명의 해시값만

변경되기 때문에 나머지 파일은 그대로 캐싱된 데이터를 사용할 수 있게 된다.

 

이렇게 CRA에 기본적으로 탑재된 SplitChunks 기능을 통한 코드 스플리팅은

효율적인 캐싱 효과를 누릴수 있게 해주지만

A, B, C 페이지로 구성된 SPA를 개발한다고 하면 이것만으로는 부족하다.

 

예를 들어 A페이지에 방문했다면 B, C 페이지에서 사용하는 컴포넌트 정보는 필요하지 않지만

별도로 설정하지 않는다면 A, B, C 컴포넌트에 대한 코드가 모두 한 파일(main)에 저장되어 버리고

파일의 크기가 커져서 초기 로딩이 오래 걸리고 캐싱효과도 제대로 누릴 수 없게 된다.

 

이를 위한 코드 스플리팅 기법이 코드 비동기 로딩 으로 함수, 객체, 컴포넌트를

처음에 불러오지 않고 필요한 시점에 불러와서 사용하는 방법이다.