TUTORIAL
코드 스플리팅 전략
React 앱 성능 최적화를 위한 코드 스플리팅 완벽 가이드. 번들 크기를 줄이고 로딩 속도를 개선하세요.
럿지 AI 팀2025-01-0815분
코드 스플리팅이란?
하나의 큰 번들을 여러 작은 청크로 분리하여
필요한 코드만 로드하는 최적화 기법입니다.
%
초기 로드 감소
초
FCP 개선
%
TTI 단축
스플리팅 방법
React.lazy()
const LazyComp = lazy(
() => import('./Heavy')
);
<Suspense fallback={<Spin/>}>
<LazyComp />
</Suspense>
Dynamic Import
const loadModule = async () => {
const { fn } = await import(
'./heavyModule'
);
fn();
};
청크 분리 전략
/
Route-based
페이지 단위로 분리 (가장 일반적)
[ ]
Component-based
무거운 컴포넌트 개별 분리
{ }
Vendor Splitting
node_modules 별도 청크로 분리
( )
Common Chunks
공통 모듈 추출하여 재사용
Next.js 자동 스플리팅
// Next.js는 페이지별 자동 스플리팅
// pages/dashboard.tsx → dashboard.[hash].js
// pages/settings.tsx → settings.[hash].js
// dynamic import도 지원
import dynamic from 'next/dynamic';
const Chart = dynamic(
() => import('../components/Chart'),
{
loading: () => <Skeleton />,
ssr: false // 클라이언트만 로드
}
);App Router에서는 서버 컴포넌트가 기본이라 더욱 최적화됩니다
번들 분석 도구
1
webpack-bundle-analyzer
번들 시각화
2
@next/bundle-analyzer
Next.js 전용
3
source-map-explorer
소스맵 분석
4
bundlephobia
패키지 크기 확인
관련 태그
#Code Splitting
#React
#Performance
#최적화
#Webpack