📦 23. 코드 스플리팅과 Lazy Loading — 사용자에게 더 빠른 앱을 전달하는 방법

처음에는 페이지 하나에 코드가 몇백 줄밖에 없었는데,
컴포넌트가 많아지고 기능이 늘어나면 어느 순간 번들 사이즈가 커지고 로딩이 느려진다.
이럴 때 사용하는 게 바로 코드 스플리팅(Code Splitting)과 Lazy Loading이다.

이번 글은 코드 스플리팅이 왜 필요한지, React에서 어떻게 사용하는지,
그리고 성능 최적화에 얼마나 영향을 주는지를 중심으로 정리했다.

---

✅ 코드 스플리팅이란?

앱을 여러 개의 작은 번들로 나누는 것
사용자가 필요한 시점에 필요한 코드만 불러올 수 있게 된다.

예전에는 하나의 JS 파일로 모든 앱을 묶었지만,
요즘은 페이지 단위, 라우트 단위, 컴포넌트 단위로 나눠서 로딩한다.

---

🐢 Lazy Loading과의 관계

코드 스플리팅이 이루어진 코드들을 필요할 때 비동기로 불러오는 기술이 Lazy Loading이다.

즉, 코드 스플리팅 = 나눠놓기,
Lazy Loading = 나눠놓은 걸 상황에 따라 불러오기

---

🔧 React에서의 코드 스플리팅 방법

1️⃣ React.lazy + Suspense

import React, { Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

• React.lazy()로 컴포넌트를 비동기로 불러옴
• <Suspense>로 로딩 상태를 처리해야 함

---

2️⃣ Next.js의 next/dynamic

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>로딩 중...</p>,
  ssr: false, // SSR 시점에 로딩하지 않게 설정 가능
});

• SSR 지원 여부까지 제어 가능
• React.lazy보다 유연하게 설정 가능

---

💡 실전에서 자주 쓰는 시점

적용 위치	설명
Modal, Dialog	평소에는 안 쓰다가 필요할 때만 띄움
Chart, Map	초기에 불러올 필요 없음, 클릭 시 로딩
관리자 페이지 대시보드	라우팅 이후에 불러오면 됨
3D 렌더링, PDF 뷰어 등	번들 사이즈 큰 경우 → 분리 필수

---

📈 성능 최적화에 얼마나 효과가 있나?

✅ 직접 측정한 예시

• Lazy 적용 전 번들 사이즈: 1.2MB
• Lazy 적용 후 초기 번들: 450KB
• LCP (Largest Contentful Paint) 개선: 3.6s → 1.2s

→ 눈에 띄는 초기 로딩 속도 향상
→ 사용자 체감 성능 상승

---

🛠️ 실무 적용 팁

• React.lazy는 client-side only
• SSR이 필요한 페이지는 next/dynamic 사용
• fallback 컴포넌트는 사용자 경험을 좌우함 → 로딩 UI 디자인 중요
• 너무 자잘한 컴포넌트까지 스플리팅하면 오히려 비효율적일 수 있음

---

📝 내가 느낀 점

코드 스플리팅은 처음엔 “그냥 코드 나누는 거지 뭐” 수준으로 봤는데,
실제로 대형 프로젝트에서 초기 로딩 속도 차이가 3초 이상 나는 걸 보고 확 체감했다.
특히 Next.js에서는 페이지 단위로 자동 스플리팅도 되니까
더 적극적으로 dynamic()을 활용하게 됐다.

---

🚀 "사용자는 빠르게 반응하는 앱을 원하고,
그건 코드를 똑똑하게 나누는 데서 시작된다."