개요
프로젝트를 완성하고 서비스를 제공할 때, 빌드 작업을 거쳐 배포해야한다.
빌드 작업을 통해 프로젝트에서 사용되는 JS 파일 안에서 불필요한 주석, 경고 메시지, 공백 등을
제거하여 파일 크기를 최소화하기도 하고, 브라우저에서 JSX문법이나 다른 최신 자바스크립트 문법이
원활하게 실행되도록 코드의 트랜스파일 작업도 할 수 있다. 만약 프로젝트 내에 이미지와 같은
정적 파일이 있다면 해당 파일을 위한 경로도 설정된다.
이 작업은 웹팩이라는 도구가 담당한다. 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인
모든 자바스크립트 파일이 하나의 파일로 합쳐지고 모든 CSS파일도 하나의 파일로 합쳐진다.
CRA로 프로젝트를 빌드할 경우, 최소 두 개 이상의 자바스크립트 파일이 생성되는데 CRA의 기본 웹팩
설정에는 SplitChunks라는 기능이 적용되어 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리시켜서 캐싱의 효과를 제대로 누릴 수 있게 해준다.
코드 스플리팅
파일을 분리하는 작업을 코드 스플리팅이라고 한다. 프로젝트에 기본 탑재된 SplitChunks 기능을 통해
코드 스플리팅은 단순히 효율적인 캐싱 효과만 있을 뿐이다. 예를 들어 페이지 A, B, C로 구성된
싱글 페이지 애플리케이션을 개발한다고 가정해보자, 사용자가 A페이지에 방문했다면 B페이지와 C페이지에서
사용하는 컴포넌트 정보는 필요하지 않다. 사용자가 실제로 B 혹은 C페이지로 이동하려고 할 때만 필요하다.
하지만 리액트 프로젝트에 별도로 설정하지 않으면 A, B, C 컴포넌트에 대한 코드가 모두 한 파일(main)에 저장되어 버린다. 만약 애플리케이션 규모가 커지면 지금 당장 필요하지 않은 컴포넌트 정보도 모두 불러오면서 파일 크기가 매우 커진다.
그러면 로딩이 오래 걸리기 때문에 사용자 경험도 안좋아지고 트래픽도 많이 나오게된다.
이러한 문제점을 해결해줄 수 있는 방법이 바로 코드 비동기 로딩이다. 이 또한 코드
스플리팅 방법 중 하나다. 코드 비동기 로딩을 통해 자바스크립트 함수, 객체, 혹은 컴포넌트를 처음에는 불러오지 않고 필요한 시점에 불러와서 사용할 수 있다.
다음에는 React.lazy와 Suspense를 활용한 컴포넌트 코드 스플리팅을 구현해보겠다.
출처 및 참고 : 리액트를 다루는 기술
