[TextField] Optimize imports so that unneeded components are not bundled.

[Graham42]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When using just a couple TextFields and a Button (ie. a login page) and using the babel-plugin-direct-import module, I would expect that only the TextField and Button components should be bundled in the ouput.

Current Behavior

Many other components including List, Menu, and Popover get included in the bundle.

Steps to Reproduce (for bugs)

I have created a sample project that just uses a TextField.

1. git clone https://github.com/Graham42/bug-babel-direct-import-material-ui-next
2. npm install
3. You can see the module bundle stats by running

npm run build
npm run stats

Context

I'm trying to minimize the bundle size of what needs to be delivered for my login page.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16.1.1
babel-plugin-direct-import	0.4.0

[mbrookes]

@Graham42 Please refer to the linked issue for an explanation.

[Graham42]

Can this component not be refactored to not pull in Select? Seems like Select should depend on TextField not the other way around.

[Graham42]

For additional context. This has an impact of 84 KB of unneeded extra code in my bundle because I'm not using the select option on TextField

[mbrookes]

Can this component not be refactored to not pull in Select?

Go for it! 😉

(I'll admit it does seem a bit topsy-turvy at first glance, but given its provinance, I have to assume it was done this way for good reason. )

Edit: spelling.

[Graham42]

I can see from the original issue and pull request that the discussion centered around the component API and usability with makes sense. However app bundle size didn't come up.

Please reopen this issue as it has not been resolved.

[mbrookes]

Done. I understand your concern, so lets put it out there for feedback.

Edit: I used the "performance" label as a proxy for bundle-size, as we don't seem to have anything more appropriate.

[oliviertassinari]

I don't think there is anything more we can do about it. You have different solutions available:

• import directly the component you need.
• rely on the es modules and tree shaking
• submit a pull-request on babel-plugin-direct-import to make the logic smarter.

[JulesAU]

@oliviertassinari Just trying to make sure I understand your response: "import directly the component you need."

Does that mean I can work around this particular issue? I'm also seeing the redundant Select component in my production bundle due to my use of TextField - I'm importing it as per the material-ui docs:

import TextField from 'material-ui/TextField';

Is there anything I can do differently to avoid this, or do we just need wait until tree-shaking and/or babel-plugin-direct-import work better?

[oliviertassinari]

import directly the component you need.

@JulesAU What I mean is that the TextField is a helper to simplify the usage of the underlying components. If you want to save some bundle size. It's 100% fine to write your own TextField component without the Select import. https://material-ui.com/demos/text-fields/#components

[JulesAU]

Ahh of course... Thanks for the tip!