Question

我很反应世界。我经历了很多反应，流量，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

我已经使用您可以在此处找到代码表单的代码实现此目的 Dynamic React-Router

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");
    // ...
});

动态加载反应页面

2 个答案: