번들링과 코트스플리팅

1. 번들링이란?

 번들링은 여러개의 파일을 하나로 묶는 작업

 react 프로젝트를 구성할 때 html 파일은 index.html 하나만 사용하는 경우가 많지만, 자바스크립트와

 css 파일은 컴포넌트의 숫자에 따라서 여러개 가 생성이 됨

 JSX 문법을 사용하는 react 에서는 모든 컴포넌트가 자바스크립트 파일이기 때문에

  파일의 수가 많아 진다. 

 이 파일들을 하나로 합쳐주는 것이 바로 번들링이다.

 

✅ 번들링의 장점

1. HTTP 요청 수 감소 → 로딩 속도 향상
   많은 파일을 각각 요청하면 속도가 느려질 수 있다.
   번들링을 통해 하나의 파일로 만들면 요청 수가 줄어들어 성능이 향상.
2. 코드 압축 → 파일 크기 감소
   공백, 주석 등을 제거하여 코드가 압축되고, 최종 번들 파일의 크기가 작아진다.
3. 사용하지 않는 코드 제거 (Tree Shaking)
   작성했지만 사용하지 않은 코드나 npm 패키지에서 사용하지 않는 부분을 자동으로 제거

 

🛠️ 사용되는 번들러

• Create React App → Webpack
• Vite → Rollup

Webpack은 기능이 많고 무겁지만 확장성이 좋고, Rollup은 상대적으로 가벼움.

 

 

2. 코드 스플리팅이란

 

  코드 스플리팅은 번들링의 반대 개념이다.
  모든 코드를 하나로 묶는 것이 아니라, 여러 개의 작은 파일로 나누는 것

✅ 코드 스플리팅의 장점

1. 초기 로딩 속도 개선
   필요한 부분만 먼저 로딩하고, 나머지는 나중에 불러오는 방식
2. 불필요한 코드 로딩 방지
   실제로 사용하지 않는 페이지나 컴포넌트는 로딩하지 않기 때문에 효율적
3. 데이터 비용 절감
   필요한 코드만 로딩하기 때문에 트래픽 사용량이 줄어든다.

 

🧩 리액트에서 코드 스플리팅 방법

리액트에서는 React.lazy()와 Suspense를 활용하여 컴포넌트를 지연 로딩(Lazy Loading) 할 수 있다.

 

 lazy 를 사용하면 현재 보고있는 페이지에서 필요 없는 페이지는 다운로드 받지 않는다.

  → 실제 페이지별로 필요한 JS 로 나눠서 로딩되기 때문에 성능 최적화에 유리

 

 Suspense 의 Fallback 을 사용 하면 태그 안쪽에 있는 컴포넌트가 불러와지지 않을때 임시적으로

 보여주는 화면을 생성한다. 

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

<Suspense fallback={<div>로딩중...</div>}>
  <MyComponent />
</Suspense>

 

⚙️ Vite에서 코드 스플리팅 설정

Vite의 설정 파일인 vite.config.js 또는 vite.config.ts에서 build.rollupOptions.output.manualChunks 옵션을 통해
모듈 단위로 스플리팅 설정을 할 수 있습니다.

export default defineConfig({
  build: {
    outDir : "docs"
    rollupOptions: {
      output: {
        manualChunks :(id) => {
          if (id.indexOf('node_modules') ! == -1 ) {
            const module = id.split('node_modules/').pop().split('/')[0];
            return `vendor-${module}`;
          }
        }
      }
    }
  }
});