using multiple libraries in react

Question

so my question is I have a react application in this application I used material UI for only two components and I installed npm i @materialui/core so basically, I installed all material UI library but I only used 2 components of that big library will this cause my application to have bigger bundle size or when you run to build it will only bundle the codes that needed and ignore the rest of the unused material UI components? this is not particularly for material UI for most of the libraries.

Look up tree-shaking, and in the Material-UI docs it explains how to set it up to only bundle the used modules. material-ui.com/guides/minimizing-bundle-size — Joel Hager
– Joel Hager, Commented May 23, 2021 at 23:25

theOctopus · Accepted Answer · 2021-05-23 23:37:11Z

1

According to the Material UI documentation, you can reduce bundle size by importing your components in the following way: let's say you want the button component, so you import it like this import Button from '@material-ui/core/Button', instead of this import { Button } from '@material-ui/core'. With the former import you'll be importing the Button module only and leaving the rest of the modules alone. For further detail, visit this link: https://v3.material-ui.com/guides/minimizing-bundle-size/. Hope you find it useful!

edited May 23, 2021 at 23:37

answered May 23, 2021 at 23:28

theOctopus

864 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali E404 Over a year ago

thanks for that explanation so that means even if we had installed so many packages but we did not import them in our code it won't affect the final build bundle size?

theOctopus Over a year ago

Well, in this specific case, MaterialUI is helping us reduce bundle size by having separated the whole package into modules. Thus, when you import them the way I showed you, you only import the ones you use. However, if you import only the necessary components you need by destructuring them from the library, like in the latter import in my answer, you will still import all those unused packages! There is a way to eliminate dead code using the tree shaking technique, this article might interest you: developers.google.com/web/fundamentals/performance/…

Collectives™ on Stack Overflow

using multiple libraries in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related