React | 번들링과 코드 스플리팅 (lazy & Suspense)

번들링

프로젝트에 필요한 여러 파일(JS, CSS, Image 등)을 하나의 파일로 묶어, 사용자가 웹 애플리케이션에 접근할 때 브라우저에 필요한 리소스를 효율적으로 로드할 수 있도록 하는 과정

리액트 애플리케이션은 여러 컴포넌트와 모듈로 구성되기 때문에, 이를 번들링하지 않으면 많은 개별 파일을 요청해야 하고, 이로 인해 불필요한 네트워크 지연이 발생할 수 있음

 

리액트에서는 주로 Webpack(CRA)이나 Rollup(Vite) 같은 번들러를 사용해 이러한 파일을 하나의 번들로 묶음

이렇게 하면 모든 리소스를 한 번에 전달할 수 있어 초기 로딩 성능이 향상되며, 코드의 의존성 관리도 간편해짐

장점

• 성능 최적화 : 개별 파일을 하나로 묶어 네트워크 요청 횟수를 줄여 초기 로딩 시간 단축
• 코드 의존성 관리 : 모든 모듈과 의존성을 통합해 충돌을 방지하고 코드가 올바르게 실행되도록 보장함

 

단 번들링만 사용할 경우 번들 파일이 너무 커질 수 있어 초기 로딩 성능에 악영향을 미칠 수 있음

이를 해결하기위해 코드 스플리팅과 함께 사용하여 필요한 리소스만 선택적으로 로드하는 방식으로 최적화를 더할 수 있음

 

 

 

---

코드 스플리팅

애플리케이션 코드를 여러 개의 작은 조각으로 나누어 필요한 부분만을 로드할 수 있도록 하는 기법

리액트 애플리케이션은 시간이 지나면서 기능이 많아져 파일 크기가 커질 수 있으며, 모든 코드를 한 번에 로드할 경우 초기 로딩 시간이 길어짐

코드 스플리팅은 필요한 코드만 로드하여 로딩 속소를 개선하고 사용자 경험을 향상시키는데 도움 됨

React에서 코드 스플리팅은 동적 Import()와 함께 React.lazy와 Suspense로 구현하는 것이 일반적임

장점

• 최적의 로딩 성능 : 초기 로딩 시 전체 번들 파일을 한 번에 로드하지 않아도 되기 때문에, 첫 화면이 더 빠르게 표시됨
• 리소스 절약 : 사용자가 접근하지 않는 기능이나 페이지에 대한 코드는 불필요하게 로드되지 않음

 

코드 스플리팅을 통해 필요한 부분만 효율적으로 로드할 수 있으며, 이는 특히 SPA에서 로딩 속도를 최적화하는 데 매우 유용함

 

---

React.lazy

컴포넌트를 바로 불러오지 않고, 컴포넌트가 필요할 때 불러옴 (지연 로드할 수 있도록 해주는 함수)

컴포넌트를 비동기적으로 로드하도록 해주는 함수

사용자가 특정 컴포넌트에 접근할 때만 해당 컴포넌트를 로드하도록 할 수 있음

import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));

 

---

Suspense

컴포넌트를 불러오는 동안 사용자에게 보여줄 임시 화면 설정

React.lazy와 함께 사용하여 지연 로드되는 컴포넌트가 로드되는 동안 보여줄 대체 UI(ex. 로딩 스피너)를 설정할 수 있음

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

 

---

React.lazy와 Suspense 예제 코드

import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));

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

이렇게 하면 MyComponent가 필요할 때만 로드되고, 로딩되는 동안 Loading... 메시지가 표시됨

 

---

VITE (Rollup) 번들링 및 코드 스플리팅 

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "docs",
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.indexOf("node_modules") !== -1) {
            const module = id.split("node_modules/").pop().split("/")[0];
            return `vender-${module}`;
          }
        },
      },
    },
  },
});

vite.config.js 파일에 위의 코드 입력한 후 아래 명령어를 터미널에 입력

npm run build

번들링을 포함한 최종 빌드 과정 실행

이 명령은 개발 환경에서 사용하던 파일들을 최적화하여 프로덕션에 배포 가능한 번들 파일로 묶음

 

• 번들링 : 프로젝트의 모든 파일을 하나로 묶거나, 코드 스플리팅에 따라 여러 파일로 나눠 최적화된 번들로 생성
• 최적화 : 코드 압축 및 난독화(Uglify)가 이루어져 파일 크기가 줄어들고, 애플리케이션이 빠르게 로드될 수 있도록 함
• 정적 파일 생성 : HTML, CSS, 이미지 등 최종 프로덕션에서 필요한 모든 정적 파일이 생성됨

 

빌드가 완료되면 프로젝트의 build 또는 dist(위의 코드에서는 docs) 폴더에서 생성된 번들 파일들을 확인할 수 있으며, 이 파일들이 실제로 배포되는 리소스들임

나눠진 파일들