react.js 桌面和移动 Web 项目架构

Question

我非常关心我的 Web 项目架构，它将拥有单独的移动和桌面 Web 应用程序。

我已经完成了基于“create-react-app”项目模板的 web 版本开发，对于移动版本，我想尽可能地重用我现有的 web 版本组件。

我们将使用单独的 url “www”（用于桌面）和“m”（用于移动）来提供这些服务。

我正在考虑两种可能的方法。

1. 只需为移动设备构建另一个 create-react-app 项目并共享通用代码。
2. 在存在的 web 客户端 create-react-app 项目 src 文件夹中，制作移动版本代码，如 component.js component.web.js component.mobile.js。但在这种情况下，我担心捆绑 js 文件的大小。

我也考虑过响应式网页设计，但我们有完全不同的布局和组件。

通过视口或 url(www/m) 的大小在组件内渲染两种不同的布局可能是另一种可能的方式，但我很有可能使用服务器端渲染...

解决这个问题的好方法是什么......

Answer 1

我会按如下方式处理：-

1. 将所有业务逻辑移动到一个通用包中，并在移动和 Web 中使用它。这将使您的逻辑变得通用。
2. 将所有通用组件/配置/颜色等移动到一个通用包中，并在两个应用程序中使用它们。

3. 分别处理两个应用程序的视图部分。

   我也考虑过响应式网页设计，但我们有完全不同的布局和组件。

   如果您有完全不同的布局和组件，我建议将移动设备和 Web 分开。它不仅与包大小有关，您可以通过延迟加载来解决它，而且您的代码复杂性会增加。