时间戳

首页 > 解决方案 > 有条件地在 create-react-app 中导入资产

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

问题描述

使用 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="" />
  );
}

但是，无论如何，这都会捆绑我的所有资产。

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

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

我是否被迫触摸 webpack 配置，如果是，我应该改变什么？还是有其他方法？

标签： javascriptreactjswebpackcreate-react-appes6-modules

解决方案

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

啊。这是什么时代！

以上都是真的，我不明白为什么有人会做或建议做不同的事情。但是，如果您仍然想这样做（出于任何原因） - 您可以！最新版通过动态导入和代码拆分对任意组件的延迟加载create-react-app提供了开箱即用的支持。您需要做的就是使用带括号的语句版本而不是常规语句。像往常一样接受一个请求字符串并返回一个 Promise。而已。动态请求组件的源代码不会捆绑在一起，而是存储在单独的块中，以便按需加载。import()import()

前：

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 相关的人，它不是。这是一个通用概念，可以在 vanilla JavaScript 中使用。

推荐阅读