javascript - React: Bundle size with redundant import statements

Question

I need an insight on how the bundle size of a web and mobile app would affect in the below scenario.

Scenario

There are 2 components Foo and Bar which import few libraries. Further, Foo imports Bar.

Foo.js

import { Text, Image, Card } from 'design-lib';
import { utilA, utilB } from 'util-lib-1';
import { utilC, utilD } from 'util-lib-2';

import { Bar } from './Bar';

const Foo = () => (
  // JSX
  <Bar />
  // JSX
)

Bar.js

import { Text, Image, Card } from 'design-lib';
import { utilA, utilB } from 'util-lib-1';
import { utilC, utilD } from 'util-lib-2';

export const Bar = () => (
  // JSX
)

Concern

These 6 import statements look like redundant code to me. So, following questions arise:

• Are these import statements really considered as a redundant code?
• Or is it that the compiled code won't have duplicate imports and combine code into single file with all import statements & foo bar components at one place?
• Would they increase the bundle size of a web and mobile app? If yes, what would be a better way to make code modular. I don't want to keep both the components in a single file.

Note: I know that the size of a lib won't double up in the final bundle if I import it twice. My concern is that each import statement must be having a size of few bytes. So, as these statements have been written twice in different files, would the compiled app have 2x the bytes each statement takes?

Answer 1

Are these import statements really considered as a redundant code?

No, they tell code maintainers, tools (like bundlers), etc. what the dependencies are between the modules.

Or is it that the compiled code won't have duplicate imports and combine code into single file with all import statements & foo bar components at one place?

That depends on your bundler, but yes, the libraries being imported in multiple places won't be duplicated in the bundle.

Would they increase the bundle size of a web and mobile app?

Only in as much as the libs themselves will be included in the bundle (once each), but presumably you're importing them because you use them and get benefit from the size they add.

---

Note: There are ways to configure bundlers that may cause replication, but standard configurations won't. In fact, a good bundler will be able to detect what parts of the libraries you do and don't use and, provided the libraries are written such that it's possible, leave out the parts that you don't use.

---

From your update saying:

I know that the size of a lib won't double up in the final bundle if I import it twice. My concern is that each import statement must be having a size of few bytes. So, if write each of these statements twice in different files, the compiled app would have 2x the bytes each statement takes.

You've answered your own question there. "I know that the size of a lib won't double up in the final bundle if I import it twice." is correct. So whether you import a lib once or 20 times, it will add only its size, not 20x its size, to the bundle.