这是在 preact/react 中为桌面和移动设备实现单独网站的最佳方式答案

【问题标题】：Which is the optimal way of implementing separate website for desktop and mobile in preact/react这是在 preact/react 中为桌面和移动设备实现单独网站的最佳方式
【发布时间】：2020-05-22 09:10:37
【问题描述】：

我正在使用 preact 和 nginx 开发一个项目。现在，我处于需要不同 UI 的情况，并且在少数情况下，移动设备的流程与桌面设备相比有所不同。我探索了一些实现这一点的方法，但仍然感到困惑，不确定哪种是最佳实现方式。

1) 使用 nginx 使用不同的 url 重定向移动设备(https://m.example.com)。 MDN 还建议，When to use different url for diffrent devices

server {
    ...
    server_name www.example.com;
    ...
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        if ($http_user_agent ~* ...) {
            rewrite ^ /m$request_uri last;
        }
        proxy_pass http://localhost:8080;
    }
    location /m {
        proxy_pass http://localhost:8080;
    }
}

缺点：这需要为移动设备，导致维护两个项目。

有没有办法在不创建单独项目的情况下处理这个问题？

2) 对所有设备使用相同的 url，但使用 mobile-device-detect 之类的包从根组件创建单独的组件，以检测用户代理并有条件地调用组件。

import { isMobile } from 'mobile-device-detect'
export default class App extends Component {
   render(props) {
      return (
         {!!isMobile ? <MobileComponent /> : <DesktopComponent />}
      )
   }
}

缺点：这种方法会增加包的大小，这可能是非常昂贵。

3) 解决上述问题的方法可能是代码拆分和延迟加载。但是如何基于用户代理/用户设备进行延迟加载呢？

【问题讨论】：

到底有什么不同？真的是程序流程吗？因为使用 CSS 媒体查询可以轻松实现不同的 UI。
不只是 css，整个 ui 的表现形式也不同。当我说流程不同时，这意味着桌面中的单步流程转换为移动设备中的多步流程，反之亦然。
嗯，那么我会选择一个并将所有逻辑（挂钩等）放入两个版本都使用的共享文件夹中。

标签： javascript reactjs webpack preact

【解决方案1】：

1) 您可以从相同的代码库创建 2 个应用程序。使用移动和桌面站点的不同入口点运行您的捆绑程序两次。你可以重复使用你的钩子、实用函数、状态管理等。

2,3) 使用(P)React.lazy 延迟加载<MobileComponent /> 和<DesktopComponent />，你就可以开始了。（假设您不需要服务器端渲染）。

【讨论】：