使用动态导入时如何防止块重复？

如何解决使用动态导入时如何防止块重复？

我将使用一些示例代码将我的问题上下文化。我使用 CRA 创建了一个新项目（未弹出）。

我在 App.js 上有这个：

import React from "react";
import "./App.css";
import DropDown from "./components/DropDown";

function App() {
  return (
    <div className="picker">
      <h1>Pick a letter</h1>
      <DropDown />
    </div>
  );
}

export default App;

如您所见，它只是一个带有 DropDown 组件的标题。

这是DropdownComponent.js：

import React,{ useState,lazy,Suspense } from "react";

const A = lazy(() => import("./A.js"));
const B = lazy(() => import("./B.js"));
const C = lazy(() => import("./C.js"));

const DropDown = () => {
  const [option,setOption] = useState("");

  const content =
    option === "A" ? (
      <Suspense fallback="loading A...">
        <A />
      </Suspense>
    ) : option === "B" ? (
      <Suspense fallback="loading B...">
        <B />
      </Suspense>
    ) : option === "C" ? (
      <Suspense fallback="loading C...">
        <C />
      </Suspense>
    ) : (
      "No choice yet"
    );

  const pickOption = (e) => {
    setOption(e.target.value);
  };

  return (
    <>
      <select name="letters" id="letters" onChange={pickOption}>
        <option value="" disabled selected>
          Select your option
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      {content}
    </>
  );
};

export default DropDown;

这里基本上我使用动态导入导入了 A、B 和 C 组件，然后根据您在选择器上的选择，它会显示相应的组件（A、B 和 C）。>

现在在每个字母组件上，我导入（仅用于本练习）一个名为 react-random-image 的随机图像组件，如下所示： （所有字母组件都相同，所以我只展示第一个）

import React from "react";
import Image from "react-random-image";

const A = () => (
  <>
    <p>This is A component</p>
    <Image width={200} height={200} />
  </>
);

export default A;

因此，如果我构建此项目并使用 webpack-bundle-analyzer 检查块，我们发现动态导入生成了 3 个块，但如果您注意到 react-random-image 出现在每个块上！

块在 3 个块上重复：

所以我的问题是，当您像这个例子一样使用动态导入时，是否有某种方法可以防止这种重复。