코드 스플리팅
-
[React] React lazy로 웹 성능 최적화 하기 (코드 스플리팅)React 2024. 2. 12. 00:28
최근에 리액트로 프로젝트를 하면서 한 번에 여러 컴포넌트들을 불러오게 되면서 웹 성능이 떨어지는 일이 있었습니다.이에 React.lazy를 통한 코드 스플리팅으로 성능을 개선해보고자 했습니다.| 코드 스플리팅리액트에서 개발을 하고 배포할 때 빌드를 하게 되는데 이때 보통 단일 Javascript 파일로 번들링 하게 됩니다.이 방식은 애플리케이션의 크기가 커지면 초기 로딩 시간이 길어지는 문제를 야기할 수 있어서 코드 스플리팅을 통해 전체 번들을 더 작은 크기로 나누고, 이를 비동기적으로 로드할 수 있게 함으로써 로딩 시간을 개선하게 해주는 것을 코드 스플리팅이라 합니다.| React lazy리액트의 lazy와 Suspense로 필요할 때에 컴포넌트를 로드할 수 있도록 하려면 아래와 같이 코드를 작성하면 ..