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>
)
}
}