코드 스플리팅(Code Splitting)이란?

코드 스플리팅에 대해 알아보자!

강의에서 나왔을 때 어렵게 느껴져서 이번엔 코드 스플리팅이 무엇인지 알아보도록 했다.

코드 스플리팅(Code Splitting)

코드 스플리팅(Code Splitting)은 애플리케이션의 번들 크기를 최적화하기 위한 기술로, 전체 코드를 한꺼번에 로드하는 대신 필요할 때만 로드할 수 있도록 나누는 것을 의미한다. 이를 통해 초기 로딩 속도를 개선하고, 사용자가 애플리케이션을 더 빠르게 이용할 수 있게 해준다.

코드 스플리팅의 장점

1. 초기 로딩 시간 단축
   • 필요한 부분만 먼저 로드하여 애플리케이션의 초기 로딩 시간을 크게 줄일 수 있습니다.
2. 성능 최적화
   • 페이지마다 필요한 자바스크립트 파일만 로드되므로 불필요한 리소스 낭비를 막습니다.

코드 스플리팅 사용 예시

리액트에서는 React.lazy()를 사용하여 컴포넌트를 나눠 로드할 수 있다. 여기서 suspense는 컴포넌트를 로딩하는 동안 표시할 ui를 정의함

마무리

코드 스플리팅은 대규모 애플리케이션에서 중요한 최적화 기술로, 성능 개선에 큰 도움이 된다. 초기 로딩 시간을 줄이고 사용자 경험을 향상시키기 위해, 필요한 곳에 코드 스플리팅을 적용하는 것이 좋다.