Code Splitting 과 React lazy, Suspense

webpack을 통해서 비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 한다.

즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다.

물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올때 보다 훨씬 편해지겠지만 하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다.

 

React.lazy는 코드분할을 하게 해준다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여준다.

 

http://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

1. 동적 import

import { add } from './math'; console.log(add(16, 26)); 
import("./math").then(math => { console.log(math.add(16, 26)); });

2. React.lazy

// Before 
import OtherComponent from './OtherComponent'; 
// after 
const OtherComponent = React.lazy(() => import('./OtherComponent'));

이건 추가로 Route를 기반으로 Router안에서 나누어 주는 것을 의미한다. 

const Home = lazy(() => import('./routes/Home')); 
const About = lazy(() => import('./routes/About')); 
<Suspense fallback={<div>Loading...</div>}> 
	<Switch> 
		<Route exact path="/" component={Home}/> 
		<Route path="/about" component={About}/> 
	</Switch> 
</Suspense>

여기서 <Suspense>를 볼 수 있는데 <Route>를 동적으로 컴포넌트를 가져오는데 가져오기 전까지 fallback 파라미터를 사용해서 Loading  화면을 동적으로 가져올 때까지 보여줄 수 있다.

 

<Suspense>가 만약에 없다면 동적으로 나오기 전에 바로 Route가 나오기 때문에 에러가 발생한다.