출처: https://crystallize.com/comics/no-code-splitting-vs-code-splitting
리액트 어플리케이션의 경우 빌드를 통해서 배포한다. 이 과정에서 파일 크기를 가능하면 최소화하는 것이 바람직하다.
왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험에까지 영향을 미치기 때문이다.
또한 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링하는 작업도 해주어야 한다.
<aside> 💡
일반적으로 이러한 작업은 웹팩(webpack)에서 담당한다.따로 웹팩을 설정해주지 않으면 프로젝트의 모든 자바스크립트 파일은 하나의 파일로 합쳐지고, CSS 역시 하나의 파일로 합쳐지게 된다.
하나의 파일로 모든 자바스크립트를 묶어서 빌드하면 파일의 크기가 매우 크고, 한 줄의 자바스크립트 코드만 수정해도 다시 모든 자바스크립트 코드들을 새로 빌드해야 하기 때문에 비효율성을 가지게 된다.
</aside>
❗더 나은 사용자 경험을 위해 코드를 비동기적으로 로딩하는 방법
예를 들어 페이지가 /main, /about, /post 이렇게 세 가지 페이지로 이루어진 SPA를 개발한다고 할 때
/main으로 들어가는 동안 /about이나 /post 페이지 정보는 사용자에게 필요하지 않을 확률이 높다.
<aside> 💡
그러한 파일들을 분리하여 지금 사용자에게 필요한 파일만 불러올 수가 있다면 로딩도 빠르게 이루어지고 트래픽도 줄어 사용자 경험이 좋아질 수가 있다.
지금 당장 필요한 코드가 아니면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용할 수 있다.
</aside>