react 코드 스플리팅

프로젝트의 규모가 커질수록 파일 용량이 커지기 때문에 그로인한 사용자에게 느린환경을 경험하게 할수 있다. 이럴때 코드 스플리팅을 사용하여 첫 렌더링시 당장 필요한 코드가 아니라면 나중에 불러오게 하여 로딩속도를 개선할 수 있다.

react-router에서 적용해보기

1. 기본 라우터 문법

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import First from "./First";
import Second from "./Second";
import Third from "./Third";

const App = () => {
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path='/' component={First} />
          <Route path='/second' component={Second} />
          <Route path='/third' component={Third} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

2. React.lazy 적용

import React, { lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const First = lazy(() => import(`./First`));
const Second = lazy(() => import(`./Second`));
const Third = lazy(() => import(`./Third`));

const App = () => {
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path='/' component={First} />
          <Route path='/second' component={Second} />
          <Route path='/third' component={Third} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

import방식을 lazy에 감싸서 필요할때 import할수있게 하였다

3. loading중 표시하기

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const First = lazy(() => import(`./First`));
const Second = lazy(() => import(`./Second`));
const Third = lazy(() => import(`./Third`));

const App = () => {
  return (
    <Suspense fallback={<p>로딩중...</p>}>
      <Router>
        <Switch>
          <Route exact path='/' component={First} />
          <Route path='/second' component={Second} />
          <Route path='/third' component={Third} />
        </Switch>
      </Router>
    </Suspense>
  );
};

export default App;

Suspense의 fallback을 활용하여 불러오는 로딩사이에 "로딩중..."을 표시할 수 있다.