【React】路由懒加载 React.lazy()

React路由懒加载lazy()

React.lazy()懒加载概念

我们在使用网站时，如果不对路由使用懒加载，则会导致刚打开网站就加载全部路由，当网站中的路由组件足够多时则会大大减慢网站的加载速度

路由懒加载就是加载首页时不加载其他组件，当你点击对应的模块，才按需去加载路由对应的资源, 可以提高加载速度，加快首页渲染 (一个页面加载过后再次访问不会重复加载)

React.lazy()使用

方法：通过react中的lazy() 这个api来动态import需要懒加载的组件

Suspense来包裹懒加载的组件进行加载，可以设置fallback现实加载中效果

如果只使用lazy但是不使用Suspense会引发报错

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'))
const count = lazy(() => import('./routes/count'))
 

export default class App extends Component {
  render() {
    return (
      <div>
          <Router>
            <Suspense fallback={<h1>Loading...</h1>}>
              <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/count" component={count}/>
                ...
              </Switch>
            </Suspense>
          </Router>
      </div>
    )
  }
}