react-loadable 实现组件按需加载

安装

npm i -D react-loadable

创建loadable.tsx文件

import React from 'react'
import Loadable from 'react-loadable'
import { Spin } from 'antd'
import index from './loadable.module.less'

// 加载动画
const loadingComponent = () => {
    return (<div className={index.lazy}>
        <Spin size="large" />
    </div>)
}

// 当不传加载动画时候使用默认的加载动画
export default (loader:any, loading = loadingComponent) => {
    return Loadable({
        loader,
        loading
    })
}

使用

import loadable from './loadable'
const Login = loadable(() => import('../pages/Login'))

更多