react-router 4.x 路由按需加载

react-router 4 代码分割（按需加载） 官方文档  https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

1.未采用路由按需加载的代码

import React from 'react';

import ReactDOM from 'react-dom';

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

import {Provider} from 'react-redux';

import './config/rem.js';

import registerServiceWorker from './registerServiceWorker';

import Loadable from 'react-loadable';

import {store} from './redux/store/store';

import  './style/common.scss';

import Home from './page/home/';

import Welcome from './page/welcome/';

import Login from './page/login/';

import Store from './page/store/';

import User from './page/user/';

import Error from './page/error';

const routes = [

                { path: '/', component: Home, exact: true },

                { path: '/login', component: Login },

                { path: '/welcome', component: Welcome },

                { path: '/store', component: Store },

                { path: '/user', component: User }

            ]

ReactDOM.render(

    <Provider store={store}>

        <BrowserRouter>

            <div className="router-page">

                   <Switch>

                    {

                        routes.map(route => (

                            <Route key={route.path} path={route.path} component={route.component}  exact={route.exact} />

                        ))

                    }

                    <Route component={ Error } />

                </Switch>

            </div>

        </BrowserRouter>

    </Provider>,

    document.getElementById('root')

);

registerServiceWorker();

2.采用 react-loadable 来实现路由按需加载

cnpm install --save react-loadable

import React from 'react';

import ReactDOM from 'react-dom';

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

import {Provider} from 'react-redux';

import './config/rem.js';

import registerServiceWorker from './registerServiceWorker';

import Loadable from 'react-loadable';

import {store} from './redux/store/store';

import  './style/common.scss';

const MyLoadingComponent = ({ isLoading, error }) => {

    if (isLoading) {

        return <div>Loading...</div>

    }

    else if (error) {

        return <div>Sorry, there was a problem loading the page.</div>

    }

    else {

        return null;

    }

};

const AsyncHome = Loadable({

    loader: () => import('./page/home/'),

    loading: MyLoadingComponent

});

const AsyncWelcome = Loadable({

    loader: () => import('./page/welcome/'),

    loading: MyLoadingComponent

});

const AsyncLogin = Loadable({

    loader: () => import('./page/login/'),

    loading: MyLoadingComponent

});

const AsyncStore = Loadable({

    loader: () => import('./page/store/'),

    loading: MyLoadingComponent

});

const AsyncUser = Loadable({

    loader: () => import('./page/user/'),

    loading: MyLoadingComponent

});

const AsyncCheckAuth = Loadable({

    loader: () => import('./page/checkAuth/'),

    loading: MyLoadingComponent

});

const AsyncError= Loadable({

    loader: () => import('./page/error'),

    loading: MyLoadingComponent

});

const routes = [

                { path: '/', component: AsyncHome, exact: true },

                { path: '/login', component: AsyncLogin },

                { path: '/welcome', component: AsyncWelcome },

                { path: '/store', component: AsyncStore },

                { path: '/user', component: AsyncUser }

            ]

ReactDOM.render(

    <Provider store={store}>

        <BrowserRouter>

            <div className="router-page">

                   <Switch>

                    {

                        routes.map(route => (

                            <Route key={route.path} path={route.path} component={route.component}  exact={route.exact} />

                        ))

                    }

                    <Route component={ Error } />

                </Switch>

            </div>

        </BrowserRouter>

    </Provider>,

    document.getElementById('root')

);

registerServiceWorker();

ok，以上就能轻松实现路由的按需加载