react按需加载asyncComponent&&react-loadable

最新推荐文章于 2025-06-25 09:24:41 发布

饭啦啦

最新推荐文章于 2025-06-25 09:24:41 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react基础

本文链接：https://blog.youkuaiyun.com/qq_36434345/article/details/87090901

React 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了两种异步组件加载的方法：使用asyncComponent函数实现视图组件的按需加载，以及利用react-loadable插件增强加载体验，展示Loading组件并设置延迟时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.asyncComponent

最简单的情况是，我们只需要异步引入视图(容器)组件，不必考虑reducers和state的更新。
这时候我们可以构造一个asyncComponent 函数：

    import { asyncComponent } from 'react-async-component';
    
    const AsyncHome = asyncComponent(() => import("./containers/Home"));
    <Route path="/" exact component={AsyncHome} />

2.react-loadable

当我们用asyncComponent的时候，会希望在加载时显示一些loading组件，有一个简单的插件react-loadable

    import Loadable from 'react-loadable';
    
	const AsyncHome = Loadable({
	  loader:() =>import('./pages').then(module => module.UserList),
	  loading: Loading,    //加载进度条
	  delay: 300       //默认的延迟是 200ms
	});
	<Route path="/" exact component={AsyncHome} />
	<Route path="/commodity/afterSale" component={AfterSale} exact/>  //exact表示初始化入口路径（默认路径）
	
	//Loading.js加载进度条内容如下：
	import React,{Component} from 'react';
	import {Icon,Spin} from 'antd';
	class Loading extends Component{
	  render(){
	    const antIcon = <Icon type="loading" style={this.props.style} spin />
	    return(
	      <div>
	        <Spin indicator={antIcon}/>
	      </div>
	    )
	  }
	}
	export default Loading