TIL : React { Code splitting }

• Code splitting : 번들이 거대해져 로드 시간을 줄이기 위해 코드를 분할한다. (lazy init...?)

  • import

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

  • Webpack 이 위 구문을 만나면 앱의 코드를 분할함, CRA를 사용한다면 WebPack에서 구성 되어 있음

    
    

  • React.lazy : 서버 사이드 렌더링에서는 불가, Loadable Components 사용해야 함.

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

    
    

  • import 를 동적으로 호출, Promise로 반환

          import React, { Suspense } from 'react';
    
          const OtherComponent = React.lazy(() => import('./OtherComponent'));
    
          function MyComponent() {
            return (
              <div>
                <Suspense fallback={<div>Loading...</div>}>
                  <OtherComponent />
                </Suspense>
              </div>
            );
          }

  • fallback 을 통해 로딩될 때 보여줄 엘리먼트 불러옴

    
    

  • Route-based code splitting

        import React, { Suspense, lazy } from 'react';
        import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    
        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>
        );

  • 라우트에서 코드스플리팅을 적용 하기에 가장 좋다

    
    

  • 현재는 default exports만 지원 중