Carbon: Reduce lib size in node_modules

[PaulaV22]

Is there a way to remove from node_modules all the icons and components from carbon that are not imported and used in the project? @carbon library is one of the largest dependency in my project and my team would like to reduce its size. Other alternatives to use carbon without taking up so much space are welcome.

[joshblack]

Hey there @PaulaV22! 👋

Are you referring to the size of the node_modules on your computer or the size of the bundle that you're serving to your users?

If it's the latter, this should be accomplished through tree shaking with your bundler. The packages themselves ship ESM bundles that will support tree shaking so that they will not be included if you aren't using them.

Let me know if you have any questions or if I can't help out with anything else!

[PaulaV22]

Hi @joshblack! Thank you for your answer.

My team needs to build de docker image of the application, reducing its size as much as possible, and one of the biggest packages after the npm install is @carbon, mainly due to @carbon/icons. We run commands to clean up the node_modules folder, like npm prune. However, since some icons from the package are imported, all the unsued icons remain.

I was wondering if there is a way to automatically remove all the unused components and icons from carbon package, or if there is another way to use the icons without saving the whole list of icons (e.g a CDN URL).

[joshblack]

@PaulaV22 ah, totally understand. We're definitely limited with what we can do, we have ~1248 icons and four sizes so the generated assets themselves total ~5,000 which is where most of the size is coming from.

Unfortunately, there isn't much we can do from that front outside of trying to figure out how to split up the icons into smaller packages and then change the dependencies for carbon to be those smaller sized packages. We might also look to using only one icon across sizes, but these are both mid-to-long term solutions and sadly I don't think will help you in the interim.

[theskillwithin]

is there a way to disable loading all icons if your not using any of the icons? since they aren't tree shacked out its just simply too big, causing performance issues.

[joshblack]

Hi there @theskillwithin! 👋 The icons will be tree-shaken from bundles. More often than not when they aren't being removed from the bundle it is due to an import from a CommonJS entrypoint (the lib folder) or a misconfiguration by the bundler or framework.

Here's a quick example with create-react-app:

With only icons-react

With carbon-components-react and icons-react

If there are steps you can offer to help us reproduce when these packages might deopt, definitely raise an issue and I'd be happy to take a look at them!

[theskillwithin]

@joshblack thank you, i changed from importing from lib folder to es folder. problem sovled!!!!!