Code Splitting란?
애플리케이션을 여러 개의 작은 번들로 나누고, 필요할 때 동적으로 로드하는 기술이다.
초기 로딩 시간을 줄이고 애플리케이션 성능을 향상 시킬 수 있다.
React에서의 Code Splitting 구현 방법
1. 동적 import()
JavaScript의 동적 import()문법을 사용하여 컴포넌트를 필요할 때 로드할 수 있다.
const App = () => {
const [Component, setComponent] = useState(null)
const handleClick = async () => {
const module = await import(./DynamicComponent)
setComponent(() => module.default)
}
return (
<div>
<button onClick={handleClick}>Load Component</button>
{Component && <Component />}
</div>
)
}2. React.lazy()
React.lazy()를 사용하면 동적 컴포넌트를 import할 수 있다.
const lazyComponent = lazy(() => import('./LazyComponent'))
const App = () => (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
)3. Route-based Code Splitting
라우트 기반 코드 스플리팅은 페이지 단위로 컴포넌트를 분할하는 일반적 방법이다.
const Home = lazy(() => import('./routes/Home'))
const About = lazy(() => import('./routes/About'))
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exct path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
)
Code Splitting의 장점
1.초기 로딩 시간 감소: 필요한 코드만 먼저 로드하여 초기 로딩 속도 향상
2.리소스 효율성: 사용자가 필요로 하는 코드만 다운로드하여 대역폭을 절약
3.성능 향상: 전체적인 애플리케이션 성능 개선
주의 사항
1.과도한 분할 주의: 너무 작은 단위로 분할하면 오히려 성능이 저하될 수 있다.
2.사용자 경험 고려: 로딩 상태를 적절히 처리, 사용자의 경험을 해치지 않도록 주의해야한다.
3.SEO 고려: 중요한 콘텐츠는 초기 로드 시 포함되어야 SEO에 영향을 주지 않는다.
툴 및 라이브러리
- Webpack: 대표적인 모듈 번들러로, 코드 스플리팅을 지원.
- Create React App: 기본적으로 코드 스플리팅을 지원.
- Next.js: 서버 사이드 렌더링과 함께 자동 코드 스플리팅을 제공.
