코드 분할과 Lazy Loading으로 초기 로드 개선

개요

웹 애플리케이션 초기 로드는 사용자 경험에 직접적인 영향을 준다. 큰 번들은 첫 화면 렌더링을 지연시킨다. 코드 분할과 Lazy Loading은 필요한 코드만 먼저 전달해 초기 렌더를 빠르게 만드는 기법이다. 이 글에서는 개념부터 구현 예시, 주의사항까지 단계별로 설명한다.

왜 코드 분할이 필요한가

사용자 관점

초기 로드가 느리면 이탈률이 증가한다. 초기 화면에 필요하지 않은 라이브러리나 컴포넌트를 모두 포함하면 불필요한 네트워크 지연이 발생한다. 따라서 핵심 경로에 필요한 최소 코드만 제공하는 것이 중요하다.

개발·운영 관점

번들이 작아지면 캐시 효율이 좋아진다. 변경이 잦은 부분과 변동이 적은 부분을 분리하면 업데이트 시 다운로드 부담이 줄어든다. 또한 장애 발생 시 영향 범위를 줄일 수 있다.

기본 개념

코드 분할(code splitting)

코드 분할은 번들을 여러 청크(chunk)로 나누는 과정이다. 빌드 도구(예: Webpack)는 동적 import를 통해 청크를 생성한다. 결과적으로 초기 번들에는 핵심 코드만 남는다.

Lazy Loading

Lazy Loading은 필요한 시점에 청크를 불러오는 기법이다. React에서는 React.lazy와 Suspense를 조합해 컴포넌트 단위로 지연 로드를 적용할 수 있다.

React에서의 구현 방법

React.lazy와 Suspense 사용 예

가장 간단한 형태의 컴포넌트 지연 로드 방법이다. 동적 import로 컴포넌트를 감싸면 빌드 시 별도 청크가 생성된다.

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

const Heavy = lazy(() => import(/* webpackChunkName: "heavy" */ './Heavy'));

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

export default App;

위 예제는 Heavy 컴포넌트를 필요한 시점에 불러온다. webpackChunkName 주석으로 청크 이름을 지정할 수 있다.

라우트 기반 분할

페이지 전환이 있는 SPA에서는 라우트 단위 분할이 효과적이다. react-router와 결합하면 각 라우트는 독립 청크가 된다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./Home'));
const Dashboard = lazy(() => import('./Dashboard'));

function Router() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>로딩 중...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default Router;

심화: 우선순위와 선행 로드

Preload, Prefetch

동적 로드만으로는 지연이 발생할 수 있다. 네트워크 여유가 있을 때 선행(prefetch)이나 즉시 로드(preload)를 사용해 사용자 경험을 더 개선할 수 있다. Webpack 주석이나 link rel을 활용하면 브라우저 힌트를 줄 수 있다.

코드 분할 전략

• 라우트 우선 분할: 각 페이지를 독립 청크로 분리
• 컴포넌트 우선 분할: 초기 렌더에 필요 없는 큰 컴포넌트만 지연 로드
• 라이브러리 분리: 대형 서드파티 라이브러리를 별도 청크로 분리

주의사항

Fallback UX

Suspense의 fallback은 사용자에게 자연스러운 상태를 제공해야 한다. 깜박임이나 레이아웃 붕괴를 막기 위해 플레이스홀더를 준비하는 것이 좋다.

에러 처리

네트워크 실패나 동적 import 실패에 대비해 에러 바운더리를 구성한다. 로드 실패 시 재시도 로직이나 대체 UI를 제공하면 신뢰성이 높아진다.

번들 분석

번들 분석 도구(예: webpack-bundle-analyzer)로 어떤 코드가 번들에 포함되는지 확인한다. 분석 결과에 따라 분할 기준을 조정한다.

결론

코드 분할과 Lazy Loading은 초기 로드 속도를 개선하는 핵심 기법이다. 작은 번들은 빠른 렌더를 만들고, 사용자 체감 성능을 높인다. 구현은 비교적 단순하지만 전략적 분할과 UX 고려가 필요하다. 번들 분석과 선행 로드 조합을 통해 안정적이고 빠른 초기 로드를 달성할 수 있다.