react-router采用loadable-Code Splitting

link:https://reacttraining.com/react-router/web/guides/code-splitting

demo

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

const LoadableComponent = loadable(() => import('./Dashboard'), {
  fallback: Loading,
})

export default class LoadableDashboard extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}

react with typescript

    "@loadable/component": "^5.7.0",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "@types/loadable__component": "^5.6.0",

app.tsx

import * as React from 'react';
import { Route, Switch } from 'react-router-dom';
import { PrimarySearchAppBar } from "./containers/views/AppBar";
// import { About, Home } from './containers'
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./containers/Test/Test'))
const Home = loadable(() => import('./containers/views/Home'))
const PlanPart = loadable(() => import('./components/PlanPart'))
const ProjectPart = loadable(() => import('./components/ProjectPart'))
const ModelPart = loadable(() => import('./components/ModelPart'))
const ModelList = loadable(() => import('./components/ModelList'))
export function App() {

  // 采用字母表顺序排列route
  return (
    <Switch>
      <React.Fragment>
        <PrimarySearchAppBar />
        <Route exact={true} path="/" component={Home} />


        <Route exact path='/project' component={PlanPart} />
        <Route exact path='/plan' component={ProjectPart} />
        <Route exact path='/project/model' component={ModelPart} />
        <Route exact path='/project/model/list' component={ModelList} />
        <Route exact path='/plan' component={ProjectPart} />

        {/* <Route path="/about" component={About} /> */}
        <Route path="/test" component={OtherComponent} />
      </React.Fragment>
    </Switch>
  )
};