[React] 코드 스플리팅과 번들링으로 성능 최적화하기

MinJae·2024년 10월 31일

목록 보기

19/21

웹사이트의 규모가 커질수록 그만큼 리소스도 많이 필요하게 됩니다. 특히 리액트와 같은 라이브러리를 사용해 애플리케이션을 개발하는 경우, 여러 모듈과 컴포넌트로 구성된 파일이 많아져 로딩 속도와 성능이 저하될 수 있습니다. 이러한 문제를 해결하기 위해 애플리케이션을 효율적으로 묶고, 필요한 부분만 선택적으로 로드하는 번들링(Bundling)과 코드 스플리팅(Code Splitting) 개념이 필요합니다. 이 글에서는 번들링과 코드 스플리팅의 개념과 함께, React에서 제공하는 React.lazy와 Suspense를 활용해 어떻게 효과적으로 애플리케이션을 최적화할 수 있는지 살펴보겠습니다.

번들링(Bundling)이란?

번들링은 여러 개의 자바스크립트 파일과 모듈을 하나의 파일이나 몇 개의 파일로 묶어주는 과정으로, 일반적으로 Webpack, Vite와 같은 번들러를 사용하여 이루어집니다. 이러한 과정은 파일 간의 의존성을 관리하고, 애플리케이션 전체 로딩 속도를 최적화하는 데 중요한 역할을 합니다.

번들링의 필요성

리액트 프로젝트에서는 여러 개의 컴포넌트와 모듈이 서로 얽혀 있어 파일이 많아지게 됩니다. 이 파일을 각각 로드하면 네트워크 요청이 증가하여 성능 저하가 발생하게 됩니다. 번들링은 이러한 문제를 해결하기 위해 모든 모듈을 하나의 큰 파일로 묶거나, 몇 개의 청크(Chunk) 파일로 나누어 관리하여 성능을 개선합니다..

📌 Chunk란?
Chunk란 여러 개의 아이템을 묶은 하나의 덩어리, 블록을 의미합니다.

번들링의 주요 기능

1. 의존성 관리

각 컴포넌트와 모듈이 필요한 의존성만 가져와 한곳에 모으기 때문에, 파일 간의 참조 관계를 자동으로 관리해 줍니다.

2. 최적화

불필요한 코드나 사용되지 않는 코드를 제거하고 최적화하여 최종 번들의 크기를 줄입니다.

3. 코드 스필리팅

필요한 코드만 로드하여 애플리케이션의 초기 로딩 시간을 줄이기 위해 코드 스플리팅을 수행할 수 있습니다. 이 방식으로 초기에는 핵심 기능만 로드하고, 사용자가 특정 기능에 접근할 때 필요한 추가 코드만 로드됩니다.

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

코드 스플리팅은 애플리케이션을 작은 코드 청크로 나누어 필요한 시점에 해당 청크를 로드하는 기법으로, 주로 지연 로딩(Lazy Loading)과 동적 로딩(Dynamic Loading)을 통해 이루어집니다. 이를 통해 초기 로딩 속도를 개선하고 사용자가 필요할 때만 해당 코드 조각을 불러와 성능을 최적화할 수 있습니다.

React.lazy와 Suspense를 이용한 코드 스플리팅

리액트에서 React.lazy와 Suspense를 사용하면 컴포넌트를 지연 로딩할 수 있습니다. React.lazy는 컴포넌트를 동적으로 가져오고, Suspense는 하위 컴포넌트가 로딩될 때까지 보여줄 fallback UI를 설정하는 역할을 합니다. 이를 통해 컴포넌트가 로드될 때 까지 로딩 화면을 보여주며 사용자 경험을 향상시킬 수 있습니다.

import React, { lazy, Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}