Tree shaking completely broken?

[vladshcherbin]

updated with the latest versions (29.06.2017)
Webpack - 3.0.0
Babel-preset-env - 1.5.2
Node - 8.1.2
OS X - 10.12.5

Current

Tree shaking is not removing imports, not used in the app.

Expected

Tree shaking, removing not used imports.

---

The test case is a simple app with React & React Router v4. Link component is not used, but the whole router package is bundled.

import React from 'react'
import ReactDOM from 'react-dom'
import { Link } from 'react-router-dom'

ReactDOM.render(
  <p>Hey</p>,
  document.getElementById('app')
)

Webpack & Rollup test repo

[TheLarkInn]

If you were to use this with babel-es2015-webpack does this still work. I think its worth verifying as ["es2015", {"loose": true, "modules": false}]] is a relatively new change to babel.

[vladshcherbin]

@TheLarkInn yes, I tried both babel-preset-es2015-webpack and babel-preset-es2015-loose-native-modules presets.

Unfortunately, the result is the same.

[TheLarkInn]

What version did you jump from where it was working?

[vladshcherbin]

@TheLarkInn I'm using it in a fresh project.

Got curious about the production file size after adding some packages and discovered this. I've seen previously issues and topics about the size, latest in create-react-app with no file size reduction.

I'll check another versions of webpack, maybe there will be difference.

[Jessidhia]

This seems to be a problem only in combination with reexports...

[vladshcherbin]

Here is my small investigation. Everything was tested with the same config as above:

• Webpack - 2.1.0-beta.20
• Babel es2015 preset - 6.13.2
• OS X 10.11

Simple react app:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <p>Hey</p>,
  document.getElementById('app')
)

The production build is 146 kb.

Time for tests:

1. Lets add some simple functions like this:

function fA() {
  console.log('I am a string')
}

We import some of them, but use only one:

import React from 'react'
import ReactDOM from 'react-dom'
import { fA, fB, fC, fD, fE, fF, fG } from './func'

fA()

ReactDOM.render(
  <p>Hey</p>,
  document.getElementById('app')
)

The size is still 146 kb as the function is pretty small. If we use all of them - the size is 150 kb.

Tree shaking is working.

2. Lets make the same test with react stuff. Simple components:

import React from 'react'

const A = () => (
  <div>
    <p>Hey, I am a message</p>
  </div>
)

Lets use one component:

import React from 'react'
import ReactDOM from 'react-dom'
import { A, B, C, D, E, F, G } from './comp'

ReactDOM.render(
  <div>
    <A />
  </div>,
  document.getElementById('app')
)

The size is now 147 kb. With all components - 152 kb.

Tree shaking is working.

3. Now we reexport the components. First, we create a file with named exports:

export { A, B, C, D, E, F, G } from './comp'

The same example as above with one component still gives us 147 kb.

Tree shaking is working.

4. Same as previous, but with a *

export * from './comp'

Now the size with one component is 152 kb.

Tree shaking is not working (exports with *). Issue is here.

5. Final test. We make two simple components and use them (as we know, tree shaking is working).

import React from 'react'
import ReactDOM from 'react-dom'
import { A } from './compA'
import { B } from './compB'

ReactDOM.render(
  <div>
    <A />
    <B />
  </div>,
  document.getElementById('app')
)

The size with one component - 147 kb, with both - 149 kb. Now, we take random library and import it in one of the components (lets take B):

import React from 'react'
import Select from 'react-select'

const B = () => (
  <div>
    <p>Hey, I am a message</p>
  </div>
)

We want to use only one component:

import React from 'react'
import ReactDOM from 'react-dom'
import { A } from './compA'
import { B } from './compB'

ReactDOM.render(
  <div>
    <A />
  </div>,
  document.getElementById('app')
)

Unfortunately, now the size is 185 kb.

---

So, the tree shaking actually removes the component, but some of the imports are included in the build (even if they were not used). Same thing happens with combined / reexported / nested files.

Any ideas why this happens with only some of the components and how to solve this?

[nylen]

I believe I'm having the same issue - tree shaking doesn't seem to be doing much of anything. The project is https://github.com/redmountainmakers/kilntroller-ui. I haven't narrowed it down to a specific bug but here is an example of a dependency I am definitely not using anywhere:

_{(image from the excellent [Webpack Visualizer](https://chrisbateman.github.io/webpack-visualizer/) tool)}

[sokra]

you could try it again with webpack beta 21, as I fixed an issue with reexports (exports * from '...')

[nylen]

No change in bundle size for the master branch of https://github.com/redmountainmakers/kilntroller-ui (444,561 bytes with both beta 20 and 21).

[sonicoder86]

@nylen @vladshcherbin have you tried turning on warnings for UglifyJS? it can tell a lot of useful information about skipped cleanup in unused classes and functions.

I have a very similar ticket with Typescript, where the generated class definitions considered as code with side effects.
#2899

[vladshcherbin]

@sokra @BlackSonic I actually have a very simple example repo here with webpack and rollup configs.

The index file imports Link from react-router, but never uses it. I expect it be removed from the production build, but it is still there (the whole react-router library I guess).

I'll give it a try with the new versions and warnings on and will post the result.

[sonicoder86]

Created an issue in UglifyJS, i think it is the source of the problem.
mishoo/UglifyJS#1261