
React | 번들링과 코드 스플리팅 (lazy & Suspense)
·
FE/React & Redux
번들링프로젝트에 필요한 여러 파일(JS, CSS, Image 등)을 하나의 파일로 묶어, 사용자가 웹 애플리케이션에 접근할 때 브라우저에 필요한 리소스를 효율적으로 로드할 수 있도록 하는 과정리액트 애플리케이션은 여러 컴포넌트와 모듈로 구성되기 때문에, 이를 번들링하지 않으면 많은 개별 파일을 요청해야 하고, 이로 인해 불필요한 네트워크 지연이 발생할 수 있음 리액트에서는 주로 Webpack(CRA)이나 Rollup(Vite) 같은 번들러를 사용해 이러한 파일을 하나의 번들로 묶음이렇게 하면 모든 리소스를 한 번에 전달할 수 있어 초기 로딩 성능이 향상되며, 코드의 의존성 관리도 간편해짐장점성능 최적화 : 개별 파일을 하나로 묶어 네트워크 요청 횟수를 줄여 초기 로딩 시간 단축코드 의존성 관리 : 모든 ..