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

Question

我们的团队正在开发一个巨大的商务应用程序，就像任何其他商务应用程序都有几个模块一样。每个模块都有自己的特定团队来处理其编码，测试和部署 作为所有模块的单一SPA，我们在部署期间面临挑战，例如其中一个部署被其他团队覆盖。为了解决这个问题，我们希望将我们的应用程序拆分为多个模块，同时遵守SPA模型 非常感谢指示这样做的方法。

示例场景：
主要应用如下，br /＆gt; 主要用途
1）产品
2）定价
3）订购
4）履行中 5）退货
我们还有 核心 模块，该模块在所有模块之间共享。

现在我们面临的挑战是确保各个组件在没有其他组件的情况下独立部署。

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

Answer 1

我们这样做的地方是工作及以下是我们实现它的方式。

1. 有状态/容器组件保存呈现逻辑，加载数据并侦听更改和无状态组件
2. 展平路线;没有unnessarilly嵌套路线。 url无法访问的组件作为帮助程序组件移动，它们处理的逻辑尽可能小。
3. 我们使用redux进行状态管理
4. 所有业务逻辑和服务器调用都在操作中处理。组件获取处理数据并专注于渲染逻辑

Answer 2

你可以尝试的一件事是......

• 确定可重复使用的所有组件，并创建一个类似于您自己的公司框架的库。
• 如果您想将它提升到一个新的水平，您可以尝试NPM私人仓库并为每个模块创建一个单独的包。 （例如产品，定价等）。因此，您将拥有一个主应用程序，所有这些模块都会像导入第三方软件包一样导入。您也可以独立部署这些模块，一旦测试好了，只需更新软件包＆amp;运行npm install。你很高兴:)使用JavaScript排序微服务架构。

Answer 3

嗯..完全分离部署的一种方法是，如果它们是单独的应用程序，但这很难保持您的依赖项同步，因此您不会强迫您的用户下载2个或3个{{1个副本}} 例如。 它还会导致模块之间转换的整页重新加载。而且你将无法轻易共享商店。

因此，有单独的模块导出路由配置和您需要的其他位，如reducer。并将所有这些导入到一个可以连接它的中央应用程序中。 然后让Webpack完成它的工作并捆绑所有的东西。