reactjs - How can I prevent duplication on chunks when I use dynamic imports?

Question

I will contextualize my question with some example code. I created a new project using CRA (not ejected).

I have this on 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;

As you can see it just is a title with a DropDown Component.

This is 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;

Here basically I imported A, B, and C components using dynamic imports and then depending on what you choose on the selector it shows the corresponding component (A, B, and C).

Now on each letter components, I imported (just for this exercise) a random image component called react-random-image like this: (all letter components are the same so I will show just the first one)

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;

So if I build this project and check the chunks with webpack-bundle-analyzer we found that there are the 3 chunks generated with dynamic imports but if you noticed react-random-image is present on each chunk!

chunks duplicated on 3 chunks:

So my question is if there is some way to prevent that kind of duplication when you use dynamic import like this example.

question from:https://stackoverflow.com/questions/66055650/how-can-i-prevent-duplication-on-chunks-when-i-use-dynamic-imports

Answer 1

Waitting for answers