Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken Tree Shaking - Icons

See original GitHub issue

Issue Description


Most of our bundle size is currently consumed with base64 encoded icon svgs.

Current situation

If a user does the following import in their application

import { AddBoldIcon } from '@commercetools-frontend/ui-kit'

their bundle is bloated with all of the Icons contained in ui-kit.

Definition of done

Users are able to import one icon, without having their bundle bloated with all of our icons.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:13 (13 by maintainers)

github_iconTop GitHub Comments

montezumecommented, Nov 14, 2019

Fixed in #1180

emmenkocommented, Jan 28, 2019

I did some digging and experimented a bit with some dummy components <Foo> and <Bar>, with <Bar> importing a couple of icons. Then I tested using a fresh CRA the bundled app, importing only <Foo> and the resulting bundle contained the icons of <Bar>, which were supposed to be removed. Same thing when bundling an app with Parcel.

  • Webpack (CRA) screenshot 2019-01-28 at 10 06 43

  • Parcel screenshot 2019-01-28 at 10 10 03

Probably there are other dependencies that will cause the same problems (e.g. I think prop-types also does it) or things like ES6 classes, static properties, etc. It seems to me that it’s still early days for having tree-shaking properly working. I looked also at other libraries, issues, etc and there still seem to be a lot of problems or confusion on how to do it. Bundlers like Webpack also seem to have a “fragile” implementation, meaning that it will bail out as soon as it can’t analyse something a “bit more complex” (at least compared to e.g. Rollup).

I would say that we don’t worry too much about this for now, as it just feels a waste of time and mental health!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree Shaking Font Awesome Icons - Spencer Miskoviak
As mentioned, tree shaking was actually enabled the entire time but it was "broken" by the way Font Awesome was setup.
Read more >
This application cannot tree shake icons fonts - Stack Overflow
While trying to build my app in release mode I encountered the following the compiler error: "This application cannot tree shake icons fonts."....
Read more >
How to build your own tree shakable SVG icons library in less ...
The most common techniques to achieve this are tree-shaking, aka dead code elimination, and lazy loading. We are going to build our icons...
Read more >
Tree-Shaking | Font Awesome Docs
Use tree-shaking to automatically subset and include only the icons you're using. Do More with Font Awesome Pro! Upgrade now and rev up...
Read more >
for dependencies of dependencies, neither code splitting or ...
Maybe the custom UI component is importing the icon library in such a way that Webpack believes it not to be tree-shakable? IIRC...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found