[JavaScript知识库]react 异步加载组件的常用方式

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

在react 16.6版本以前，是用的react-loadable来实现异步加载组件的；在16.6版本中已经推出了Suspense来实现异步加载组件

分别看看两种方式的实现。

react-loadable

react-loadable是一个第三方库，所以需要安装

安装

npm install  react-loadable

基本使用

//一般的组件的使用
import Home from '@/pages/home'
<Route path="/home" component={Home} />
    
    
//异步加载组件
import Loadable from 'react-loadable'
<Route path="/home" component={Loadabel({
    loader: () => import('@/pages/home'),
    loading: loading   //loading组件
})}>

封装函数，同一处理异步组件
上面的写法，每当组件太多的情况下，就显得有点复杂跟臃肿，所以封装一个函数来统一处理，在使用组件的时候只需要导入就行。

//utils/loadable.js

import Loadable from 'react-loadable'

export default (loader) => {
    return Loadable({
        loader,
        loading:   //可以自己写一个加载组价
        loading() {
        	return <div>正在加载组件</div>
    	},
        delay: 200
                
    })
}

设置了一个delay，我们只在加载超过 200 毫秒的时候显示loading ，这样做可以很好地避免在请求快速完成时“闪烁”加载中的组件

import loadable from '@/utils/loadable'

//异步加载组件
const Home = loadable(() => import('@/pages/Home'))

Suspense

React.Suspense是一个新添加到核心React库中的功能

注意:

React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。

基本使用

import { Suspense, lazy } from 'react'

const Home = lazy(() => import('@/pages/Home'))

//lazy必须要在Suspense包裹中使用
<Suspense>
      <Route path="/home" component={Home} />
</Suspense>

当然这个也支持loading加载组件。 fallback属性接受任何在组件加载过程中你想展示的 React 元素

<Suspense fallback={<div>正在加载组件</div>}>
      <Route path="/home" component={Home} />
</Suspense>

在Suspense中还不支持delay这种延迟功能，所以也就避免不了闪烁的现象。如果想要处理的话，就需要在fallback组件中自己手动写下代码逻辑，在一定的时间内不加载loading组件。

总结

以上就是在项目中经常用的异步加载组件。我认为都可以使用，根据自己写好来。

Suspense的优势：

• 更小的打包体积（因为它是第三方库）
• react中内置的核心库，比第三方容易维护吧

React-Loadable的优势：

• 可以设置延迟时间，只需要配置一下
• 可以在服务端使用