React-select: Imported components bloat bundles with lib contents

[NateRadebaugh]

When importing "Select" and the "Async" component and bundling via webpack, the resultant bundles include artifacts from the "lib" dir instead of exclusively from react-select.esm.js

import Select from "react-select";
import AsyncSelect from "react-select/lib/Async";

Resultant output from webpack-bundle-analyzer:

Other dependencies (eg styled-components) only show their *.esm.js file in the bundle and not the entire lib.

The entire bundle size appears to be 149.68 KB, but the unnecessary lib dir is 83.86 KB. If the lib dir is removed, we should be able to reduce the bundle size by 50%.

Does this make sense? Is it possible to import only from the react-select.esm.js file?

[NateRadebaugh]

It looks like by explicitly importing from react-select/lib/Select, the bundle size is decreased to remove the react-select-esm.js entirely.

[NateRadebaugh]

However, the component is broken without importing from react-select, so there seems to be something that can still be improved here.

[TrySound]

@NateRadebaugh Yes, it's possible

import Select, { Async as AsyncSelect } from 'react-select';

I'm gonna make bundle size a bit smaller soon.

[joetidee]

At 23kb gzipped, this still feels pretty chunky for a select component.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!