code splitting 방법들
자세한 내용은 React 문서 "Code-Splitting – React" 를 참고하자.여기 내용은 client-side rendering 을 위한 것이다.
import()
기본적으로 webpack 을 사용하면, import 를 할 때 dynamicimport() 를 사용할 수 있다.import {add} from './math'; console.log(add(10,10 ));
import("./math").then(math => { console.log(math.add(10, 10)) });
React.lazy
v16.6 부터 지원한다 : React v16.6.0: lazy, memo and contextType – React Blog현재 default export 에 대한 지원만 한다. 그래서 만약 named export 를 사용해야 하는 상황이면, 새로운 component 를 하나 만들고, 그 안에서 다시 default export 를 해서 default export 로 만들어서 사용하면 된다.(참고)
이 방법을 사용하면, webpack 에서 chunk 를 나눠준다.
import MyErrorBoundary from './MyErrorBoundary'; const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent')); const MyComponent = () => ( <div> <MyErrorBoundary> <Suspense fallback={<div>Loading...</div>}> <section> <OtherComponent /> <AnotherComponent /> </section> </Suspense> </MyErrorBoundary> </div> );
Route-based code splitting
route 를 기준으로 code splitting 을 할 때는 아래처럼 사용하면 된다.import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; const Home = lazy(() => import('./routes/Home')); const About = lazy(() => import('./routes/About')); const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> </Switch> </Suspense> </Router> );
