React.lazy
通过引入lazy,Suspense两个方法实现路由懒加载
首先,我们需要在组件中引入lazy,Suspense这两个方法
然后我们需要通过Suspense组件 包裹着注册路由
import React, { Component,lazy,Suspense } from 'react'
const home = lazy(()=>import('./home'))
const index = lazy(()=>import('./index'))
<Suspense fallback={}>
<Router path='/home' component={home}></Router>
<Router path='/index' component={index}></Router>
</Suspense>
- 通过lazy() api来动态import需要懒加载的组件
- import的组件目前只支持export default的形式导出
- Suspense来包裹懒加载的组件进行加载,可以设置fallback现实加载中效果
注意:fallback方法你可以写虚拟dome或者传入个普通组件