Tree Shaking?

Is this a bug report?

Maybe?

Can you also reproduce the problem with npm 4.x?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

1. node -v: 6.9.5
2. npm -v: 5.0.3
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected): 1.0.10

Sorry about removing the template, I figure this will be a pretty quick yes or no answer.

    "react-scripts": "^1.0.7"

So I’ve read around a lot that webpack 2 supports tree shaking out of the box. Cool! Also, I know that material-ui is written such that it SHOULD tree shake. I’m also assuming react-scripts v1.0.7 is built on webpack 2? Anyways:

import { AppBar } from 'material-ui';

When I run the analyzer you guys suggested adding my output is as follows:

Should this not be getting rid of unused components? I’ve googled around a lot trying to figure this one out.

Thanks! -Dan

[pshrmn]

I believe that part of the tree shaking issues with the current version of React Router is related to the re-exports that we use (react-router-dom re-exports everything from react-router) https://github.com/ReactTraining/react-router/pull/5095.

Another issue that appears to exist with tree shaking React components is the way that babel compiles class <C> extends React.Component. The current implementation cannot be (safely) tree shaken. I have opened up this issue https://github.com/babel/babel/issues/5983 in hopes of determining the correct steps to getting a side effect free way of compiling classes.

[pshrmn]

@eluchsinger For Babel transforms, https://github.com/babel/babel/pull/6963 is the PR to watch. With that, class components will be transformed into pure functions that are easy to tree shake (at which point it will be up to library authors to release packages with pure components).