Is eui tree-shakeable?

[lightwave]

I couldn't find any documentation about whether eui is tree-shakeable or not. Is there somewhere that document things we can do to reduce bundle size?

[thompsongl]

I did confirm a few months ago that a properly configured webpack project will tree shake unused modules (off the top of my head that is ensuring es imports are used, production mode, and minification), though this can be cumbersome and error prone. - (#3164 (comment))

@chandlerprall might have some more details. On a broader note, though, we are working towards making EUI modular, but that is definitely a long-term effort.

[chandlerprall]

Confirmed again via create-react-app, started with new project & added EUI+dependencies, then imported & used just the EuiButton component. Dev experience (yarn start) loads 10.7mb of resources while the production build (yarn build) only loads 241kb.

There's nothing special about tree-shaking for EUI (or shouldn't be, and that appears to be true). The webpack docs have a tree shaking guide which has always worked for me with EUI on custom, non-create-react-app projects.

For completeness, I should mentioned that the CSS bundle we provide is never pruned.

[cchaos]

@chandlerprall Should we convert this to a Q&A discussion marked with your answer?