Tree shaking does not work on dependencies of dependencies

[carpben]

Converting from ES6 named imports, such as

import {faTimes} from "@fortawesome/pro-light-svg-icons"
import {Range} from "rc-slider"

to specific ("cheery picking") imports, such as

import {faTimes} from "@fortawesome/pro-light-svg-icons/faTimes"
import Range from "rc-slider/es/Range"

reduced bundle size from 1.01MB to 870kb.
I know that this is what we should expect from Lodash, but that tree shaking is possible with named imports . Could it be that CRA, due to its Babel-Webpack configuration, blocks "tree shaking" for named imports?

Project details:
"react-scripts": "2.1.5",
Typescript

Resources: optimizing-js-tree-shaking-1, optimizing-js-tree-shaking-2

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[carpben]

@iansu, @ianschmitz, Do you mind sharing your opinion?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[simonssspirit]

We are also interested in this improvement.

You can change your own imports, but in cases with third party packages which use name imports internally, you have no option to change it.

[Dan503]

The core of this issue is that tree shaking does not work for dependencies of dependencies.

My use case:

Our company has a component library. The component library is distributed through npm as a project dependency. At the individual project level we can use icons from material-ui by using the condensed syntax:

import { icon1, icon2 } from '@material-ui/icons'

In our component catalogue we are forced to use the expanded syntax:

import icon1 from '@material-ui/icons/icon1'
import icon2 from '@material-ui/icons/icon2'

When you have a lot of icons to import, this method is ugly and verbose.

If we don't use this method in the component catalogue though the entire material-ui icon library downloaded adding an extra ~5MB to the site weight.

This is because the component catalog is the dependency and the icon library is the dependency of the dependency.

In my case, we have a way to avoid this but if there is a third party library that is using the condensed import syntax, there is no way to avoid it.

[Dan503]

Can we please change the name of this issue to "Tree shaking does not work on dependencies of dependencies"?

That is what this issue is all about. The current name is a bit vague as to what the problem is.

[carpben]

@Dan503, Thanks, this was very helpful.

I think you just answered the original title "Can "Tree shaking" be improved for named imports?". According to your answer it's an issue of the dependencies, perhaps the bundler, not of CRA.

However, I disagree about the title. I posted a question, and was clueless about the answer. Changing the title is misleading, and also confusing as it does not go along with the original post. So unless I'm missing something I think the original title is more suitable.
@ianschmitz