动态加载反应页面答案

【问题标题】：Dynamically loading react pages动态加载反应页面
【发布时间】：2016-02-19 17:32:18
【问题描述】：

我对反应世界很陌生。我浏览了许多 react、flux、webpack 等示例。我发现当我创建一个页面作为 react 组件时，它会被 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 时，我在那里找到了所有组件。在我的情况下，每个组件都是一个繁重的脚本，所以在第一次加载本身时加载所有组件并不好。

【问题讨论】：

延迟加载不同的组件是一个不错的功能。但我强烈建议不要这样做。当我们在用户端加载应用程序时，我总是希望用户拥有我的代码的所有基本部分。只有要传递给这些组件的数据应该被委托。此外，由于动态加载代码的多个部分，您将很难在生产环境中进行缓存失效。
感谢您的建议，但在第一次加载时加载所有组件是否是个好主意？因为我在每个组件存储中都有大量代码用于解析复杂数据。当我加载组件时，我必须加载这些商店。如何处理这种情况？在问题中，我刚刚添加了一个示例示例，但在现实生活中，每个组件商店都有大量代码。
是的，您可以继续连接、转换和丑化您的所有代码，然后使用该 js 文件加载到用户浏览器上。在我目前的 AngularJS 项目中，我们有大约 100 个不同的组件（每个组件有多个部分）和几个 3rd 方库，所有这些都被压缩和丑化成一个 js。每个版本都进行版本化以使缓存无效。不过有一个区别。我们将所有 html 模板转换为一个巨大的模板缓存 js 并额外加载。

标签： javascript reactjs webpack react-router

【解决方案1】：

我终于从这里找到了解决方案

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】：

我已经使用代码实现了这一点，您可以在此处找到代码表 Dynamic React-Router

【讨论】：