Broken Tree Shaking - Icons

Background

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.

[montezume]

Fixed in #1180

[emmenko]

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)

• Parcel

---

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!