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

Question

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

1) 使用不同的 url 为移动设备重定向（https://m.example.com) using nginx. MDN also suggests, 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;
    }
}

Cons: This will required to create separate repository for mobile-devices, results in maintaining two projects.

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

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

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

Cons: This method will increase the size of bundle, which might be very costly.

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

Answer 1

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

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

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

Which is the optimal way of implementing separate website for desktop and mobile in preact/react

javascript

reactjs

webpack

preact