자바스크립트 + 리액트 디자인 패턴

316

자바스크립트 + 리액트 디자인 패턴

const App = lazy(() => import(/* webpackChunkName: "home" */ "./App"));

const Overview = lazy(() =>

import(/* webpackChunkName: "overview" */ "./Overview")

);

const Settings = lazy(() =>

import(/* webpackChunkName: "settings" */ "./Settings")

);

render(

<Router>

<Suspense fallback={<div>Loading...</div>}>

<Switch>

<Route exact path="/">

<App />

</Route>

<Route path="/overview">

<Overview />

</Route>

<Route path="/settings">

<Settings />

</Route>

</Switch>

</Suspense>

</Router>,

document.getElementById("root")

);

module.hot.accept();

경로별로 컴포넌트를 지연 로딩하면, 현재 경로에 필요한 코드가 포함된 번들만 요청하게 됩

니다. 페이지 이동 시 로딩 시간이 다소 걸릴 수 있다는 점은 이미 많은 사람에게 익숙하기 ...