Eui: import a single component with webpack build all the library

[ebuildy]

With version v6.8.0, in a fresh project created via cra cli.

Include a single component: import { EuiSpacer } from "@elastic/eui will include all the library, add 1Mo to the generated JS (debug via webpack-bundle-analyzer lib).

But using syntax import { EuiDatePicker } from "@elastic/eui/lib/components/date_picker" will include only the desired component, add a few Ko to the generated JS.

Since recent React version includes Lazy loading concept (https://reactjs.org/docs/code-splitting.html), I think it will be a good thing if eui components could be imported separately.

[chandlerprall]

It's on our roadmap to address EUI's modularization. Largely this breaks down into three categories:

• CSS - move to CSS modules or something similar, don't require styles for all components to be downloaded
• JS - enabled webpack's ability to tree-shake EUI, look at other systems (.e.g rollup) to see what support there would need. This would enable import { EuiSpacer } from "@elastic/eui" to only include the necessary code.
• Split up specific components - some components like EuiIcon can be split up to enable better tree-shaking.

While these are on the roadmap, it's been lower priority as our Elastic products do use the majority of components and we won't see huge, direct benefits internally.

[ebuildy]

Sure I understand, also I am sure most of eui usage is backoffice/admin web UI, so size doesnt really matter.

Thanks you for the explanations.