react-loadable 路由懒加载(hoc应用)

首先写一个过度组件(可以写在utils下,作用一个是避免加载的空白期,二就是方便代码管理):

import React from 'react'

import LoadAble from 'react-loadable'

// 过度组件

function LogingComponent (){

  return(

   

这里是过度组件

  )

}

export default (LoadComponent)=>{

  return LoadAble({

    loader:LoadComponent,

    loading:LogingComponent

  })

}

在入口页面中引入使用:

import loadable from  ‘./utils/loadable’

const Login = loadalble(()=>import(‘./pages/Login’))

___________________________________________

路由懒加载使用起来非常的方便,优化效果也是很明显

你可能感兴趣的:(react-loadable 路由懒加载(hoc应用))