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

Posted 2020-11-09 炫年华

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，以上就能轻松实现路由的按需加载