React路由懒加载的实现

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或者传入个普通组件