如何为移动和桌面版本提供不同的Reactbundle

Question

我正在做一个React项目，它首先是移动的，我正在使用Material UI来设计我的组件。我的移动/桌面组件使用材质ui的<Hidden>元素进行渲染，以确定是否需要进行渲染。

我显然不愿意在手机或台式机上不需要的时候发送所有额外的代码，但我没有看到关于如何实现这一点的很多讨论。我开始考虑延迟加载我的组件，这样它们在不需要的时候就永远不会渲染，但这可能会对我的性能有所帮助，而不是运送不必要的代码，对吧？有没有什么首选的方法可以只包括前端，因为我的后端在Firebase上运行无服务器？

Answer 1

使用扩展名为您的平台或项目类型创建单独的文件：

Popup.mobile.tsx // example file for mobile
Popup.desktop.tsx // example file for desktop 

在使用此示例Popup组件时，您应该只添加以下行：

import Popup from '[path-to-component]/Popup'; // <--- LOOK! do not add extra extensions here, just the name part

此外，在.env文件中的ENV变量(如ENV_TYPE(中添加扩展名前的名称：

// .env file
ENV_TYPE=mobile

或

// .env file
ENV_TYPE=desktop

然后在你的Webpack中添加这个配置：

const envExtensionDetector = (envType, extensions) => [
...extensions.map(ext => `.${envType}${ext}`),
...extensions,
];
~~~
// webpack configuration
export default {
resolve: {
extensions: envExtensionDetector(process.env.ENV_TYPE, [".js", ".jsx", ".css", ".ts", ".tsx"]),
},
//...
};