Javascript 在create react应用程序中有条件地导入资产

使用create React app创建React应用程序时是否可以有条件地导入资产？我知道require语法-示例：

import React from "react";


const path = process.env.REACT_APP_TYPE === "app_1" ? "app_1" : "app_2";

const imagePath = require(`./assets/${path}/main.png`);

export default function Test() {
  return (
      <img src={imagePath} alt="" />
  );
}

从“React”导入React；
const path=process.env.REACT\u APP\u TYPE==“APP\u 1”？“应用程序1”：“应用程序2”；
const imagePath=require（`./assets/${path}/main.png`）；
导出默认函数测试（）{
返回(
);
}

然而，无论如何，这捆绑了我所有的资产

它将加载正确的映像，但在最终构建中仍会将所有文件捆绑在一起

当我查看最终构建的开发工具时，我可以看到那里的所有资产，即使我只想加载

app\u 1

的资产

---

我是否被迫触摸网页配置，如果是，我应该更改什么？或者有其他方法吗？

您将需要使用webpack（或其他绑定器）。绑定时代码没有运行，因此编译器无法知道遵循哪个逻辑分支（app_1或app_2）。因此，为了实现您的目标，您必须进入捆绑机的逻辑

然而，这并不像看上去那么可怕，因为webpack内置了这样做的功能（不需要第三方…）

我会考虑使用webpack.providePlugin

（）

或是它的兄弟姐妹们的定义

（）

（我恐怕这些例子都是我想不起来的，所以它们不太可能在第一阶段就奏效。）

示例：

两者都需要提供程序模块

// in path/provider.js

module.exports = {
  live: '/path/to/live/image',
  dev: '/path/to/dev/image'
}

提供插件示例

// in webpack

new webpack.ProvidePlugin({
    imagePath: [
      'path/provider',         // the file defined above
      process.env.ENVIRONMENT  // either 'dev' or 'live'
    ]
  }),

//在代码中
var providers=require（'path/provider'）；//与上述路径提供程序相同
导出默认函数测试（）{
返回(
);
}

---

在这两种情况下，绑定器都会在编译时强制将变量折叠为实际的文本值—在绑定发生之前。由于您现在已将逻辑路径向下折叠为单个选项，因此现在可以自由地仅绑定相关资产。

在React不存在的日子里，我们没有将资产放入JS文件中。我们让CSS来决定为哪些选择器加载哪些资产。然后，您可以简单地为相应的元素（甚至整个页面）打开或关闭相应的类，viola会更改颜色、背景甚至表单。纯魔法

啊。这是什么时候啊

所有这些都是真实的，我不明白为什么会有人这样做或建议做不同的。然而，如果你仍然想这样做（出于任何原因）-你可以！最新的

create-react-app

通过动态导入和更新，提供了对任意组件的开箱即用支持。您只需使用带括号的

import（）

语句，而不是常规语句

import（）

像往常一样接收请求字符串并返回承诺。就这样。dynamicali请求的组件的源代码不会捆绑在一起，而是存储在单独的块中，以便按需加载

之前：

从“/OtherComponent”导入OtherComponent；
函数MyComponent（）{
返回(
); 
}

之后：

const OtherComponent=React.lazy（（）=>import（'./OtherComponent'）；
函数MyComponent（）{
返回(
);
}

请注意

功能MyComponent

部件是如何相同的

---

对于那些想知道它是否与CRA或React有关的人来说，事实并非如此。这是一个通用的概念

您无法使用默认CRA设置执行此操作

---

因为如果您的动态要求或动态导入路径不是静态，则webpack将无法确定要包含在最终生成文件夹中的资产，因此，它将从您的

/src

文件夹中获取所有内容，然后将它们全部放在您的

构建

文件夹中。

有一种方法可以使用默认CRA设置来实现这一点

您可以向.env添加类似的内容

REACT_APP_SKIN=1

将您的皮肤资源放入public/css1、public/css2等中，并使用如下代码将它们包含在public/index.html中

<link href="/css%REACT_APP_SKIN%/theme.css" rel="stylesheet">

在构建中包含一些不会使用的文件对您的用例真的不好吗？我只是在想，如果我有20个不同的版本，每个版本都有30个资产。从长远来看，可能有很多不必要的文件。寻找相同的问题，但纯香兰素。在某些罕见的情况下，它真的很有用。但是询问者提到他不想碰网页。网页是可以的，特别是如果它是非常简单的改变。我会看一看。对组件有效，但如何加载具有动态路径的资产（这一次取决于ENV变量）我看不出动态路径有什么区别。我没有使用过它，但在我看来，您仍然会捆绑资产以永远不使用它们，如果没有代码拆分，那么就没有任何优势，因为您将处于与OP当前相同的位置。因此，除非您使用CRA或类似软件，否则它还需要使用Webpack？动态导入是一个简单的过程，因此最终可能会开箱即用，但目前-是的，这只是一个概念，需要围绕篝火跳舞。但不，资产不会捆绑在一个大文件中并提供给用户，而是按需加载。据我所知，将文件移动到

build

文件夹不是问题，而是捆绑（转换为DataURL并包括到最终的JS文件中）是问题。它会将这些额外的文件分割成单独的块。

// in code

var providers = require('path/provider'); // same path provider as above

export default function Test() {
  return (
      <img src={providers[process.env.ENVIRONMENT]} alt="" />
  );
}

import OtherComponent from './OtherComponent';

function MyComponent() {   
  return (
    <div>
      <OtherComponent />
    </div>   
  ); 
}

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

REACT_APP_SKIN=1

<link href="/css%REACT_APP_SKIN%/theme.css" rel="stylesheet">