carbon-components is not amenable to tree-shaking

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Bundle sizes involving carbon-components (including when used via carbon-components-react) are a lot larger than I expect them to be because there seems to be no tree-shaking going on in carbon-components.

Create a file entry.js reading as follows:

import { Loading } from 'carbon-components'
console.log(Loading) // don't render, just log

Then at the command line:

npm install carbon-components webpack webpack-cli
npx webpack entry.js --output output1.js --mode production

You’ll find output1.js is in the vicinity of 111kB, and at a glance appears to contain the entirety of carbon-components.

Next, open node_modules/carbon-components/package.json and add a property "sideEffects": false here. Save it and go back to the command line.

npx webpack entry.js --output output2.js --mode production

Here, we find that output2.js is more like 11kB, contains only the Loading component and its one or two required modules.

Is this issue related to a specific component?

No.

What did you expect to happen? What happened instead? What would you like to see changed?

I am not going to suggest that adding "sideEffects": false to carbon-components’ package.json is the entire solution here, there’s obviously a lot of different externalities and testing to think about…

What version of the Carbon Design System are you using?

carbon-components@10.11.2

[s100]

Actually, on reflection, it seems that carbon-icons hasn’t been updated for two years… So, I think “upgrade to @carbon/icons-react” is an acceptable response to that particular issue. That’s what we plan to do. The query with carbon-components remains though.

[s100]

I have discovered that carbon-icons@7.0.7 has exactly the same issue. If entry.js reads:

import { iconAdd } from 'carbon-icons'
console.log(iconAdd)

then npx webpack entry.js --output output1.js --mode production yields an 88kB bundle containing every single Carbon icon.

If I add "sideEffects": false to carbon-icons’ package.json, the result is 1.15kB and contains only the icon I used.