作用

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
在单页面应用中，如果没有应用懒加载，运用webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

lazy
定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。

Suspense
让组件在渲染之前进行“等待”，并在等待时显示 fallback 里的内容。

示例
```
//index.js
import {BrowserRouter as Router} from 'react-router-dom'   // 使用 History API 
ReactDOM.render(
<React.StrictMode>
  <Router>
    <App />
  </Router>
</React.StrictMode>,
document.getElementById('root')
);
```
```javascript //App.js import React ,{ Suspense,lazy }from ‘react’ // 引入 Suspense,lazy const Home = lazy(() => import(‘./view/Home’)) const About = lazy(() => import(‘./view/About’)) const History = lazy(() => import(‘./view/History’)) import Loading from ‘./components/Loading’

function App() { return (

}> // 在为加载成功时显示 fallback 里的内容

) } ```

前端专栏