Imported components bloat bundles with lib contents
See original GitHub issueWhen 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?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
How is JavaScript library bloat mitigated with Web Components?
Say that I develop component A which has a dependency for underscore. js and want to use components B and C which have...
Read more >Minimizing bundle size - Material UI - MUI
Development bundles can contain the full library which can lead to slower startup times. This is especially noticeable if you use named imports...
Read more >Trim the Fat From Your Bundles Using Webpack Analyzer ...
This gif (which is taken from Import Cost's Github page) shows a perfect example of how importing the uniqueId property from Lodash brings...
Read more >Reduce JavaScript payloads with tree shaking - web.dev
Importing only what's needed # While both bundles shrank, it's really the main bundle that benefits most. By shaking off the unused parts...
Read more >Angular Modules Best Practices 2021 - Chris Kohler
Best practices how to bundle your application with Angular modules. ... perfect since it allows the library consumer to only import the components...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@NateRadebaugh Yes, it’s possible
I’m gonna make bundle size a bit smaller soon.
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!