styled-components is ~50% larger than it could be due to IE11 support

[wojtekmaj]

The problem

Looking at Bundlephobia, it appears that tslib dependency is taking 19% of the bundle size. My own tests using Vite Bundle Analyzer yielded even more unfavorable results: styled-components consists of 32.88 KB of styled-components "itself" and 14.42 KB, or 30% of the total size, of tslib.

This made me wonder if it's possible to get rid of tslib and reduce the bundle size.

Possible solutions

:-1: Avoid problematic syntax

Looking at unminified bundle we can see only two imports from tslib:

import { __spreadArray, __assign } from 'tslib';

The former is used 8 times, the latter - 18. I don't think it would be wise to try and rewrite the code to get rid of these imports, as it would make the code less readable and maintainable (I tried!).

:+1: Target ES2015

A much better solution would be to change the target in tsconfig.json to ES2015. This would allow TypeScript to use ES6 features, such as spread operator and object.assign, without transpiling them to ES5. Not only that, but the "core" styled-components code would be reduced from 29255 to 26884 bytes, which is another 8% reduction in size.

Browser support

Looking at the docs, we can't find any info on what browsers are supported in v6, so I guess I should assume that it's the same as in v5, which unfortunately includes IE11.

On the contrary, there's this post from @kitten suggesting that IE11 support is going to be dropped in v6. Also, with 0.16% of global usage, there isn't much to worry about.

Still - a breaking change, so we can't just change the target to ES2015.

What we can do

Here's what we can do:

• Release a new major version of styled-components with ES2015 target in tsconfig.json
• Release a new minor version of styled-components which would include additional, opt-in ES2015-targeted build

[quantizor]

There is another thing to consider: performance. Part of why we target ES5 is the ES5 APIs are actually faster than their ES6 counterparts.

For a library like styled-components where our hot paths are invoked potentially many thousands of times upon a page and sometimes even dynamically, it matters.