首页问答专栏讲堂更多

SegmentFault

首页
问答
专栏
课程
活动
发现
- 圈子
- 标签
- 酷工作
- 排行榜
- 徽章
- 笔记
- 开发手册
- 广告投放

搜索

立即登录免费注册

问答
问答详情

react如何动态加载组件？

react.js

13.4k 次浏览问题对人有帮助，内容完整，我也想知道答案 1 问题没有实际价值，缺少关键内容，没有改进余地

有很多组件、根据类型不同，希望能够动态加载对应的组件。

现在的做法是，通过if else 或者switch 去渲染，但是这些组件都是一次性的全部加载进来了。

关注 | 9
收藏 | 6
评论
邀请回答
编辑
Translate
- 举报
- 历史版本

陌鸿ci

22 2017-09-01 提问提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知默认排序时间排序 7 个回答

答案对人有帮助，有参考价值 2 答案没帮助，是错误的答案，答非所问

可以尝试着使用一下 react-loadable，一款按需加载的工具，功能挺齐全的~~~

Einskang

41 2017-09-03 回答提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

在render函数里面定义一个变量let component = ''保存想渲染的组件，根据条件将不同的组件赋值给前面的变量，最后将变量写入return里面<div>{component}</div>

t现在是冬天t

753 2017-09-01 回答提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

可以搜索一下 webpack，code split

Cola

1.4k 2017-09-01 回答提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

使用 require('Component') 动态加载组件：

if (type = 'number') {
    Input = require('NumberInput')
}

PS：这段代码应该在编译的过程中完成。

notebin

2.8k 2017-09-01 回答提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

segmentfault.com/a/11...
这篇文章写得挺好的，我现在也是按照这种方式做的：

定义一个 asyncComponent 函数

使用方式

import { asyncComponent } from './AsyncComponent'

const Foo = asyncComponent(() => import(/* webpackChunkName: "foo" */ "./foo"))

<Route path="/xx" component={Foo} />

webpack配置文件中，配置chunkName
chunkFilename: '[name].js'

文章里面用的webpack2，我使用的是webpack3，功能是OK的。

补充：也可以看看这篇文章 segmentfault.com/a/11...

无名小贝勒

5.4k 2017-09-01 更新提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

如果你使用的webpack1，可以使用require.ensure();
语法如下：

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

可参考链接：www.css88.com/doc/webp...

如果你用的webpack2或webpack3，请使用import()
语法如下：

import("模块路径").then(ModuleName =>{});

参考链接：webpack.js.org/api/mo...

其实以上是使用webpack的代码分离和按需加载功能；

以下是参考文章：
webpack 按需打包加载: github.com/eyasliu/bl.…
在Webpack中使用Code Splitting实现按需加载: www.alloyteam.com/2016...
基于webpack Code Splitting实现react组件的按需加载: zhuanlan.zhihu.com/p/...

alwaysVe

1.6k 2017-09-01 回答提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

react-loadable吧，这玩意很强大，需要webpack2+以及babel-plugin-dynamic-import-webpack插件支持。如果你升级最新create-react-app，则不需要额外配置，直接引入即可，最新版官方脚手架好似已经帮你解决了import()的语法支持。

dynamic.js

import Loadable from 'react-loadable'
//下面一段代码即可按需按需加载完react组件，webpack会自动切割代码
export const AdminList = Loadable({
  loader: () => import('./admin.list'),
  loading: () => null
})

routes.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import * as routerMap from 'rootPath/application/config/routerMap'
import { AdminList } from './dynamic'

export default () => (
  <Switch>
    <Route exact path={routerMap.ADMIN_LIST} component={AdminList} />
  </Switch>
)

webpack切割后的代码：