code splitting react

1import React, { Suspense } from 'react';
2
3const OtherComponent = React.lazy(() => import('./OtherComponent'));
4
5function MyComponent() {
6  return (
7    <div>
8      <Suspense fallback={<div>Loading...</div>}>
9        <OtherComponent />
10      </Suspense>
11    </div>
12  );
13}

1import React, { Suspense, lazy } from 'react';
2import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3
4const Home = lazy(() => import('./routes/Home'));
5const About = lazy(() => import('./routes/About'));
6
7const App = () => (
8  <Router>
9    <Suspense fallback={<div>Loading...</div>}>
10      <Switch>
11        <Route exact path="/" component={Home}/>
12        <Route path="/about" component={About}/>
13      </Switch>
14    </Suspense>
15  </Router>
16);

1// MyApp.js
2import React, { lazy } from 'react';
3const MyComponent = lazy(() => import("./MyComponent.js"));