CODEWITHSUNDEEP
reactjsreact-bootstrap
Beginner
Beginner

Reputation: 202

Does same imports in different files result in increased build size in ReactJS?

I have a personal project in which I am using react-bootstrap. So my question is if I import, let's say a Modal Component in two different react components of mine, will it result in increased build size?

If it does then what is the best way to import to prevent the unnecessary increase.

I tried experimenting with builds but didn't find any increase.

Upvotes: 1

Views: 558

Answers (1)

Mamunur Qureshi
Mamunur Qureshi

Reputation: 46

If we are specifically talking about bundle size i.e. the size of the initial bundle that's downloaded when a user accesses your page, then no that's not an issue (apart from a few bytes to store the reference).

This is because react-bootstrap (the parts that you use) will be bundled with your web application (depending on your webpack config), and then reused throughout you application.

As for what you can do to reduce this:

You can import the subfolder of the library that you need. e.g. instead of importing {Modal} from "react-bootstrap" you would import Modal from "react-bootstrap/modal", although I'm pretty sure create-react-app does that for free when you run yarn build (please double-check that part).

Here is a new React create app after running yarn build: No imports

Here is the build size of the create react app with 1 modal: 1 modal

Here is the build size of the create react app with a 2nd modal: 2 modals

As you can see there is a clear difference in size from the 1st image to the 2nd image, but a very small difference between the 2nd and the 3rd.

Upvotes: 1

Related Questions