Javascript 如何将庞大的React应用程序拆分为多个小模块

我们的团队正在开发一个巨大的商业应用程序，就像其他任何商业应用程序一样，它有几个模块。每个模块都有自己的特定团队负责其编码、测试和部署。
作为所有模块的单一SPA，我们在部署过程中面临着挑战，就像其中一个部署被其他团队覆盖一样。为了克服这个问题，我们希望将我们的应用程序拆分为多个模块，同时遵循SPA模型
我们将非常感谢您为我们指路。

示例场景：
主要应用程序划分如下，br/> 主应用程序
1） 产品
2） 定价
3） 订购
4） 履行
5） 返回
而且我们还有核心模块，在所有模块之间共享。

现在，我们面临的挑战是确保独立部署各个组件，而不使用其他组件

---

注意：我们正在使用webpack跨react组件进行捆绑和代码拆分。

我们在工作中这样做，下面是我们实现这一点的方法

有状态/容器组件保存渲染逻辑、加载数据并侦听更改和无状态组件

平坦路线；没有不必要的嵌套路由。url无法访问的组件作为帮助器组件移动，并且它们处理的逻辑尽可能小

我们使用redux进行状态管理

所有业务逻辑和服务器调用都在操作内部处理。组件获取处理后的数据，并专注于渲染逻辑

---

你可以尝试的一件事是

• 确定所有可重用的组件，并创建一个类似于您自己的公司框架的库
• 如果您想将其提升到下一个级别，可以尝试NPM private repo，并为每个模块创建一个单独的包。（例如产品、定价等）。因此，您将有一个主应用程序，所有这些模块都将像导入第三方软件包一样导入。您还可以独立部署这些模块，测试完成后，只需更新包并运行npm安装。很好：）类似于使用JavaScript的微服务架构

---

好吧。。完全分离部署的一种方法是，如果它们是独立的应用程序，但要保持依赖关系同步确实很困难，因此您不会强迫用户下载2或3份

react dom

。 它还将导致在模块之间转换时重新加载整个页面。而且你也不可能那么容易地分享一个商店
因此，应该有单独的模块来导出路由配置和您需要的其他位，如减速机。并将所有这些导入到一个中央应用程序中，将其连接起来。

---

然后让Webpack完成它的工作，把所有的东西都打包好。
谢谢Femi。我们也在关注上述事情。事实上，每个模块都有单独的文件夹，每个模块文件夹都有自己的动作、减速器和组件。我的问题更多地围绕着单个模块的部署策略，这使得它与其他模块隔离。哦，在最近的一个项目中，我们将每个子组件分离到它们自己的repo中，将它们发布为专用npm模块，并将它们安装到主模块中。但是，当您在子组件中工作并且希望在主组件中看到更改时，这引入了一些不希望的开发设置。在子组件之间导航时，我们也遇到了一些问题。