Broken Tree Shaking - Icons
See original GitHub issueBackground
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:
- Created 5 years ago
- Comments:13 (13 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Fixed in #1180
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](https://user-images.githubusercontent.com/1110551/51825276-b53be500-22e4-11e9-9da4-8b4a7aac5433.png)
Parcel![screenshot 2019-01-28 at 10 10 03](https://user-images.githubusercontent.com/1110551/51825457-195ea900-22e5-11e9-87f0-b3baa3390721.png)
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!