reactjs - react.js 桌面和移动 web 项目架构

Question

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

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

我们将为这些提供单独的 url “www” 用于桌面和“m” 用于移动。

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

只需为移动设备构建另一个 create-react-app 项目并共享通用代码。

在现有的 web 客户端 create-react-app 项目 src 文件夹中，制作像 component.js component.web.js component.mobile.js 这样的移动版本代码。但在这种情况下，我担心捆绑 js 文件的大小。

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

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

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

Answer 1

我将按如下方式处理:-

将所有业务逻辑移动到一个通用包中，并在移动和 Web 中使用它。这将使您的逻辑通用。

将所有通用组件/配置/颜色等移动到一个通用包中，并在两个应用程序中使用它们。

分别处理两个应用程序的 View 部分。

I also thought about the responsive web design, but we have totally different layout and components.

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