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

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

1）使用其他网址使用nginx重定向移动设备（https://m.example.com）。MDN还建议，何时为不同的设备使用不同的url

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）以上观点的解决方案可以是代码拆分和延迟加载。但是如何基于用户代理/用户设备来延迟加载呢？