React-router - CodeSplitting(prodoction) _ Create chunk

ReactJS - CodeSplitting(prodoction) _ Create chunk

react-router v4 version4

sorce code는 이전 문서에서 재활용한다.

/...../ 는 생략되었다는 표시임

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

비동기적 코드 불러오기 : Create Chunk

코드를 비동기적으로 불러오면, webpack에서 처리를 하면서 코드를 분리시키는과정을 chunk라 한다.

~cra-router/src/components$ SplitMe.js

import React from 'react';

const SplitMe = () => {

    return (

        <div>

            SplitMe

        </div>

    );

};

export default SplitMe;

여러줄의 import파일을 한줄로 대체 하기위한 index.js파일

~cra-router/src/routes$ index.js

export { default as Home } from './Home';

export { default as About } from './About';

export { default as Posts } from './Posts';

export { default as Login } from './Login';

export { default as MyPage } from './MyPage';

export { default as Search } from './Search';

export { default as NotFound } from './NotFound';

비동기적으로 파일을 불러오기 위해서는 특정함수 내에서 import를 한다.

LifCycle 메써드 안에 넣을 수도 있고, 따로 함수를 지정해 줄수도 있다.

~cra-router/src$ App.js

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import { Home, About, Posts, Login, MyPage, Search, NotFound } from './routes'

/* import { Home, About, Posts, Login, MyPage, Search, NotFound } from './routes' 로 대체하였다.

  위의 한줄로 대체 하기 위해서는 아래 파일들이 위치한 폴더에 index.js를 생성하여야한다.

import Home from './routes/Home';

import About from './routes/About';

import Posts from './routes/Posts';

import Login from './routes/Login';

import MyPage from './routes/MyPage';

import Search from './routes/Search';

import NotFound from './routes/NotFound'; */

import Header from './components/Header';

//const App = () => {

class App extends Component {

    state = {

        SplitMe: null

    }

    showSplitMe = () => {

        //비동기적으로 코드를 불러오고, 함수의 결과는 Pronise를 반환한다.

        //import()는 모듈의 전체 네임스페이스를 불러오므로, default를 직접 지정해주어야 함.

        import('./components/SplitMe').then(({default: Component}) => {

            //불러오고 난 후에 컴포넌트를 state에 집어 넣는다.

            this.setState({

                SplitMe: Component

            });

        });

    }

    render() {

        const { SplitMe } = this.state; //state에 담겨있는 SplitMe에 대한 레퍼런스를 만든다.

        return (

                <Router>

                    <div>

                        <Header />

                        { SplitMe && <SplitMe /> /* SplitMe가 유효하면 렌더링을 해준다. */}

                        <button onClick={this.showSplitMe}>Click_SplitMe</button>

                        <div>

                            <Switch>

                                <Route exact path='/' component={Home} />

                                <Route path='/about/:username' component={About} />

                                <Route path='/posts'  component={Posts} />

                                <Route path='/login'  component={Login} />

                                <Route path='/mypage'  component={MyPage} />

                                <Route path='/search'  component={Search} />

                                <Route component={NotFound} />

                            </Switch>

                        </div>

                    </div>

                </Router>

        )

    }

}

export default App;