将 React App 拆分为 2 个独立的部分答案

【问题标题】：Splitting React App to 2 Independent Parts将 React App 拆分为 2 个独立的部分
【发布时间】：2015-12-20 18:08:41
【问题描述】：

我正在开发的应用程序（Node.js + Express + React + Alt）面向 2 类人群 - 教师，它是一个具有多条路线的大型应用程序，以及学生，它是一个非常具有单一路线的小应用程序。

我想把这两部分完全分开，所以students路由渲染时不会加载teachers部分的代码。

我有两个原因：

学生应用程序的加载时间更短 - 当我知道不需要时下载和运行这么大的 JavaScript 代码块是没有意义的。
安全方面 - 虽然没有数据泄露，但我还是宁愿对学生隐藏教师使用的代码。

有没有简单的方法可以做到这一点？
我可以使用一个 React 应用（和一个 React-Router）吗？

感谢您的帮助！

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

实现这一点的最佳方法是使用 Webpack 功能 Code Spliting。这允许您自动将代码拆分为块，并仅在需要时加载所需代码。

您可以查看 React Router 示例：huge-apps

魔术发生在内部组件（require('./routes/*')）中，这里他们使用回调方法来获取组件，看起来像这样：

export default {
  path: 'nameOfComponent',
  getComponent(location, cb) {
    require.ensure([], (require) => {
      cb(null, require('./components/nameOfComponent'))
    })
  }
}

Require.ensure 被 Webpack 检测到并生成一个包含所有代码及其内部依赖项的新块。

当应用程序在浏览器中执行时，第一次加载只获取带有路由定义的主块，并且每个路由组件都按需加载（当您更改路由时）。

对我来说，这是最干净的方式。因为您将责任委托给构建系统。在 Webpack 2 中，您可以使用 System.import 代替 require.ensure，并且是更符合 ES6 标准。

【讨论】：

谢谢！现在我正在使用 Gulp 和 Browserify，我必须先替换它们才能实现它。