基于路由的拆分

1import React, { lazy, Suspense } from "react";
2import { render } from "react-dom";
3import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
4
5const App = lazy(() => import(/* webpackChunkName: "home" */ "./App"));
6const Overview = lazy(() =>
7  import(/* webpackChunkName: "overview" */ "./Overview")
8);
9const Settings = lazy(() =>
10  import(/* webpackChunkName: "settings" */ "./Settings")
11);
12
13render(
14  <Router>
15    <Suspense fallback={<div>Loading...</div>}>
16      <Switch>
17        <Route exact path="/">
18          <App />
19        </Route>
20        <Route path="/overview">
21          <Overview />
22        </Route>
23        <Route path="/settings">
24          <Settings />
25        </Route>
26      </Switch>
27    </Suspense>
28  </Router>,
29  document.getElementById("root")
30);
31
32module.hot.accept();