리액트는 알다시피 한번에 모든 페이지 정보가 스크립트로 들어감.
그러다보니 방문하지 않을 페이지의 코드까지 로드하니 비효율적일 때가 있다.

해당 페이지로 라우팅되었을 때만 그 페이지 코드를 불러오게 해보자.

사용된 모듈은 react, react-dom, react-router-dom 이다.
리액트 라우터는 v4다.

app.js (html에서 불러오는 코드 파일이다.)

import React, { PropTypes, Component} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter , Route, Switch, Link } from 'react-router-dom';
import AsyncComponent from './lib/asyncRoute';
const Comp1 = AsyncComponent( () => import('./Comp'));
const Comp2 = AsyncComponent( () => import('./Comp2'));


class App extends Component{
      constructor(props){
            super(props);
      }
      render(){
            return(
                  <div>
                         <ul>
                               <li><Link to={`/`}>링크1</Link></li>
                               <li><Link to={`/2`}>링크2</Link></li>
                         </ul>
                        <Route exact path="/" component ={ Comp1 }/>
                        <Route path="/2" component ={ Comp2 }/>
                  </div>
            )
      }
}

ReactDOM.render(
      <BrowserRouter >
      <App/>
      </BrowserRouter>,
      document.getElementById('app')
);

여기에 보면 ./lib/asyncRoute 를 불러와서 외부 파일 비동기 호출할 수 있게 만들었다.

./lib/asyncRoute.js

import React from 'react';
export default function AsyncComponent(getComponent){
      return class AsyncComponent extends React.Component {
            static Component = null;
            state = { Component : AsyncComponent.Component };

            componentWillMount () {
                  if ( !this.state.Component ){
                        getComponent().then( ( { default : Component } ) => {
                              AsyncComponent.Component = Component;
                              this.setState( { Component })
                        })
                  }
            }
            render () {
                  const { Component } = this.state;
                  if ( Component ) {
                        return <Component { ...this.props } />
                  }
                  return null;
            }
      }
}

이렇게 파일 만들어 놓고 app.js에 보면 알겠지만 Route의 component = { Comp1 } 은 변수로 정의한 위 asyncRoute.js 의 함수를 실행해서 반환받는다.

webpack3로 build 할 때 webpack.config.js 는 http://bongsunga.com/blog/3575 를 참고하면 된다.