react-overlays icon indicating copy to clipboard operation
react-overlays copied to clipboard

Side effects flag for tree shaking

Open HenrikFricke opened this issue 5 years ago • 1 comments

Describe the bug

Bundle size increases by ~12kb (gzipped) just by importing the Modal component of react-overlays.

To Reproduce

Steps to reproduce the behavior:

  1. Install react-overlays
  2. Import the modal in your project (e.g. a simple Create-React-App setup)
  3. Run your build step
  4. Inspect the bundle (e.g. source-map-explorer)

Expected behavior

The package.json should have a "sideEffect": false flag to enable tree shaking.

Screenshots

Bundle size with sideEffects flag

As you can see, popper.js gets removed and decreases the bundle size quite significantly.

image

Bundle size without the flag

image

Environment

  • react-overlays: 2.1.0
  • react-scripts: 3.2.0

Resources

  • https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

HenrikFricke avatar Nov 28 '19 15:11 HenrikFricke

sure, we'd take a PR for this

taion avatar Nov 28 '19 19:11 taion