react-loadable 实现路由懒加载

  • Z时代
  • 2024-01-10
  • 分类：综合

react

安装依赖：

yarn add react-loadable

创建通用工具类：

src/util/loadable.js

/*路由懒加载(异步组件)*/
import React from 'react';
import Loadable from 'react-loadable';
//通用的过场组件
const LoadingComponent =()=>{
    return (
        <div>loading</div>
    ) 
}
//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = LoadingComponent)=>{
    return Loadable({
        loader,
        loading
    });
}

router里面调用方式改为如下

/*配置路由*/
import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable from '../util/loadable'
const Home = loadable(()=>import('@pages/home'))
const Routes = () => (
    <BrowserRouter>
        <Route path="/home" component={Home}/>
    </BrowserRouter>
);
export default Routes

封装之后，laodable只需写一次，改变的只是组件的引入方式，这样一来就方便多了，

react-loadable是以组件级别来分割代码的，这意味着，我们不仅可以根据路由按需加载，还可以根据组件按需加载，使用方式和路由分割一样，只用修改组件的引入方式即可

以上是 react-loadable 实现路由懒加载 的全部内容， 来源链接： utcz.com/z/382017.html

回到顶部