Side effects flag for tree shaking - Githubissues

react-bootstrap / react-overlays

Utilities for creating robust overlay components

https://react-bootstrap.github.io/react-overlays

MIT License

895 stars 222 forks source link

Side effects flag for tree shaking #744

Open HenrikFricke opened 4 years ago

HenrikFricke commented 4 years ago

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:

Install react-overlays
Import the modal in your project (e.g. a simple Create-React-App setup)
Run your build step
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.

Bundle size without the flag

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

taion commented 4 years ago

sure, we'd take a PR for this