2026-03-19

코드 스플리팅 & Lazy Loading

코드 스플리팅이란?

하나의 큰 JS 번들을 여러 개의 작은 파일로 나누어 필요한 시점에만 로드하는 기법

보통 SPA는 모든 코드가 하나의 큰 번들로 묶인다.

• 초기 로딩 느림
• 사용하지 않는 코드까지 다 다운로드

⇒ 해결: 필요한 시점에만 로드

왜 필요한가?

스플리팅 안 하면

• main.js가 2MB
• 첫 접속 시 전부 다운로드

스플리팅 하면

• 홈 화면 코드만 먼저 로드
• 다른 페이지는 이동 시 로드

코드 스플리팅 목적

⇒ 초기 로딩 속도 개선

⇒ 번들 크기 감소

⇒ 필요 없는 코드 미리 로딩 방지

Lazy Loading (지연 로딩)

• 지금 당장 필요하지 않은 리소스를 나중에 로드하는 것
• 필요한 순간에 코드를 실제로 불러오는 방식

React에서 코드 스플리팅 방법

• React.lazy

  import React, { Suspense } from "react";
  
  const Dashboard = React.lazy(() => import("./Dashboard"));
  
  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <Dashboard />
      </Suspense>
    );
  }
  

• Suspense로 감싸기

  <Suspense fallback={<div>Loading...</div>}>
    <Dashboard />
  </Suspense>
  

⇒ import()가 동적으로 실행됨

장점과 단점

장점:

• 초기 로딩 속도 개선
• 번들 크기 감소
• 사용자 경험 향상

단점:

• 네트워크 요청 증가
• 잘못 설계하면 오히려 느려질 수 있음

참고자료

• https://velog.io/@s_sangs/%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-Code-Splitting
• https://yooneeee.tistory.com/104
• https://yeeeon.tistory.com/59