`lottie-web` blows up our bundles and makes page load slower

[Mikadv]

What package(s) are you using?

• [x] Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• [ ] Legacy/CDAI
• [ ] Legacy/Security

Detailed description

On a performance improvement work across our offerings we noticed that there is a huge library in our chunks which is lottie-web. Its by far the biggest lib that gets pulled in and we wondered why, after investigation we noticed its from @carbon/ibm-products.

Now we wondered about two things:

• Why is it nearly as big as our imports from @carbon/ibm-prodcuts? We didn't expect @carbon/ibm-prodcuts ships such a beast. More over we wondered if something is wrong here with tree shaking because it looks as if the entire library is pulled in instead of only the things it needs. Or in a nutshell: Treeshaking seems broken for it.
• Why is it there at all? We use Tearsheet, TearsheetNarrow, TagSet, OptionsTile, UserProfileImage, ToolbarButton, ToolbarGroup, SidePanel. After discussions you use it for complex animations with SVG. But non of the above should have one. Or do I miss something here?

Describe in detail the issue you're having.

Our chunks get polluted and slow down page load because the browser has to download bigger bundles and analyze all of it before it can progress.

Is this issue related to a specific component?

Not sure.

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

• The library is not there
• If that is not an option: It gets tree-shaked and only relevant parts that @carbon/ibm-products use remain.

What browser are you working in?

Doesn't matter here.

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

@carbon/ibm-products@^1.61.1

We use [email protected] at the state of writing with the default terser plugin that is shipped with it used.

Steps to reproduce the issue

1. Include dependencies above.
2. Compile your code, use the webpack-bundle-analyzer for it for instance
3. Look for lottie

[paul-balchin-ibm]

Hi @Mikadv,

1. What are you using to generate your project? create-react-app, vite, next.js, something else?
2. What version of React are you using?

[paul-balchin-ibm]

Hi @Mikadv,

I created two basic projects, one using create-react-app and the other using vite.

• Both installed React 18 by default and were rolled back to version 17
• Both are referencing @carbon/ibm-products version 1.64.0

As you can see from the attached image, I was not able to replicate the problem you're experiencing.

→ InlineTip is the only component that imports SteppedAnimatedMedia, → SteppedAnimatedMedia is the only component in @carbon/ibm-products that imports lottie-web.

[Mikadv]

Thank you very much for checking. I double checked on our end. And I can see nothing in the call-chain where lottie-web would come with.

In the meantime I investigated more projects and their bundles and every time @carbon/ibm-products is part of it it bundles also lottie-web. Its like a curse that follows us. I also looked through the code and can't see something. It feels like we beat around the bushes and sadly miss an important part.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Remove the stale label or add a comment, otherwise this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has received no activity for 14 days.