Tree shaking seems not working.

[SidKwok]

I use core-decorators in create-react-app project, and use function in this way:

import {autobind} from 'core-decorators';

But the bundle size doesn't reduce.

When I change in this way:

import autobind from 'core-decorators/lib/autobind;'

The bundle size seems good to me.

Did I misunderstanding tree-shaking?

Let me know if you need more infomation.

[SidKwok]

And rollup works fine.

config:

import resolve from 'rollup-plugin-node-resolve';

export default {
    input: 'index.js',
    output: {
        file: 'test.js',
        format: 'umd',
        name: 'yo',
    },
    plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true
        })
    ]
}

index.js:

import {autobind} from 'core-decorators'

export default autobind

[jayphelps]

hmm if it works in rollup, but not webpack2, that seems to suggest webpack2 is the culprit--though something I'm doing might be making it less than ideal to webpack2's logic 😄 . If you have time to make an example repo I can use to reproduce I'll take a closer look?

This might be the issue: https://github.com/facebookincubator/create-react-app/issues/2748 and https://github.com/webpack/webpack/issues/2867

[SidKwok]

Yeah, it is really easy to reproduce. Run all these lines:

create-react-app react-demo
cd react-demo
npm install core-decorators --save

App.js:

...
import {autobind} from 'core-decorators';
...

Then run npm run build, see the bundle size:

Edit App.js:

...
import autobind from 'core-decorators/lib/autobind';
...

Then run npm run build, see the bundle size:

I solve this issue by using babel-plugin-transform-imports.

[benneq]

Any news on this?

[jraoult]

@jayphelps @benneq I just did some testing by forcing sideEffects to false in the webpack config and I could confirm the positive effect on the final bundle size. That said, it would be better to set that in the package.json directly as described here: https://github.com/webpack/webpack/tree/master/examples/side-effects.

FYI that's the rule I use in my webpack config as a workaround:

{
  test: /node_modules\/core-decorators/,
  sideEffects: false
}