react-router按需引入

./component/AsyncComponent

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

./App.js

import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import AsyncComponent from './components/AsyncComponent'

const Login = AsyncComponent(() => import("./pages/Login"))
const CloudView = AsyncComponent(() => import("./pages/CloudView"))
const Home = AsyncComponent(() => import("./pages/Home"))

export default class App extends Component {
    render() {
        return (
            <div style = {{height:'100%'}}>
                {/* 一级路由注册 */}
                <Switch>
                    <Route exact path='/' render={() => <Redirect to='/login'/>}></Route>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/cloudview' component={CloudView}></Route>
                    <Route path='/home' component={Home}></Route>
                </Switch>
            </div>
        )
    }
}