Semantic-ui-react: RFC: add `sideEffects: false` to package.json

[djMax]

Webpack 4 now supports a sideEffects: false value in package.json which indicates to the tree shaking algorithms that there are no side effects from loading modules. This is fairly important to semantic-ui-react because defaultProps are essentially side effects as far as babel is concerned. BUT, if that's the only side effects semantic-ui-react uses, since they're only relevant to the component itself, they should be safe to shake out. Not a great explanation, but the TL:DR; is that we should add sideEffects: false to the package. Agreed? I can make a PR if that's desired.

https://github.com/webpack/webpack/tree/master/examples/side-effects

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

@djMax Thanks for suggestion, it's one of the most expected things. It will allow to omit babel-plugin-lodash.

However it should be tested before we will add this param to package.json.

[goenning]

I would be happy to help test this whenever available!

[brianespinosa]

@goenning PRs are welcome if you'd like to submit something and help us start the testing process. 🎉

[levithomason]

Yes, please! I've been wanting to add an analytics build step to our PRs as well. I want to see at least bundle size in something like a markdown file so we can easily see diffs in the PRs. We could track full library size as well each component.

I did this last year in #1233 and tracked doc site bundle stats as well as library stats in well formatted markdown. Have a look at those to see what I'm after here.

IIRC the final engineering hurdle here was figuring out how to generate these so that PRs include them. Looking back, I think I'd just use husky to fire this on pre-push. This way, PRs are updated only when pushing to the remote.

Thoughts?

[layershifter]

Webpack 4 in production mode, without sideEffects

Webpack 4 in production mode, with sideEffects

---

Tested JSX

import React from 'react'
import { Button, Ref } from 'semantic-ui-react'

const App = () => (
  <Ref innerRef={(n) => console.log(n)}>
    <Button>Example</Button>
  </Ref>
)

It's a cool result 👍

[layershifter]

Option was added in #2941.