question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Imported components bloat bundles with lib contents

See original GitHub issue

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:

image

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:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
TrySoundcommented, Aug 13, 2018

@NateRadebaugh Yes, it’s possible

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

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

0reactions
bladeycommented, May 28, 2020

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found