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.
Advertisement
Answer
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!