javascript - 在 create-react-app 中有条件地导入 Assets

Question

在使用 create-react-app 创建 React 应用程序时是否可以有条件地导入 Assets ？我知道 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="" />
  );
}

无论如何，这捆绑了我所有的 Assets 。

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

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

我是否被迫接触 webpack 配置，如果是这样，我应该更改什么？还是有别的办法？

Answer 1

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

啊。这是什么时代啊!

以上都是真实的，我不明白为什么有人会做或建议做不同的事情。但是，如果您仍然想这样做(出于任何原因)- 您可以!最新的 create-react-app 开箱即用地支持 lazy loading通过动态导入和 code splitting 的任意组件.您需要做的就是使用带括号的 import() 语句代替常规语句。 import() 照常接收请求字符串并返回 Promise。而已。动态请求的组件的源代码不会被捆绑，而是存储在单独的 block 中以按需加载。

之前:

import OtherComponent from './OtherComponent';

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

之后:

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

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

注意 function MyComponent 部分是如何相同的。

对于那些想知道它是否与 CRA 或 React 相关的人来说，事实并非如此。 can be used in vanilla JavaScript 是一个通用概念.