动态加载反应页面

Question

我是 React 世界的新手。我经历了很多反应、通量、webpack 等的例子。我发现当我创建一个页面作为反应组件时，它被 webpack 捆绑并加载到页面中。

如何在单击每个选项卡时动态加载反应组件。我已经使用 reat-router 完成了此操作，但问题出在 index.js 我必须包含所有选项卡组件。

var Tab1 = require('./components/Tab1');
var Tab2 = require('./components/Tab2');
var Tab3 = require('./components/Tab3');

render((
  <Router>
      <Route path="/" component={Tab1}>
      <Route path="about" component={Tab2} />
      <Route path="users" component={Tab3} />
    </Route>
  </Router>
), document.body)

有什么方法可以动态加载这些组件，而无需在页面的早期包含这些组件？或者 webpack 会处理这个？当我搜索 bundle.js 时，我在那里找到了所有组件。在我的例子中，每个组件都是一个繁重的脚本，所以在第一次加载本身时加载所有组件是不好的。

Answer 1

我已经使用代码实现了这个你可以在这里找到代码形式

Answer 2

终于从这里找到了解决方法

https://github.com/rackt/react-router/blob/master/docs/guides/advanced/DynamicRouting.md

https://webpack.github.io/docs/code-splitting.html

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    // ...
});

动态加载反应页面

Dynamically loading react pages

javascript

reactjs

webpack

react-router