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

Question

我正在开发的应用程序 (Node.js + Express + React + Alt) 针对两种类型的人群 - 教师，它是一个具有多条路线的大型应用程序，以及学生，它这是一个非常小的应用程序，只有一条路线。

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

我有两个原因：

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

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

感谢您的帮助！

Answer 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 标准的

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

Splitting React App to 2 Independent Parts

reactjs

react-router