tylerkrupicka
commented
3 years ago Bundle Size Report
| name | master | pr | +/- | % |
|---|---|---|---|---|
| @devtools-ds/object-parser | 2.47 kB | 2.47 kB | 0.00 Bytes | 0% |
| @devtools-ds/port-controller | 11.03 kB | 11.03 kB | 0.00 Bytes | 0% |
| @devtools-ds/themes | 30.69 kB | 6.01 kB | -24.68 kB | -80% |
| @devtools-ds/object-inspector | 71.96 kB | 21.25 kB | -50.72 kB | -70% |
| Total | 116.15 kB | 40.76 kB | -75.39 kB | -65% |
✅ No size breaking changes detected
Courtesy of your bundle-size bot :package::rocket:
What Changed
I noticed the size of some of the components was pretty large, and did some digging to find out why. It turns out our package template is missing the sideEffects tag, so dependencies were never being tree-shaken.
This meant that:
@design-systems/themewas never tree shaking based on usage.Breaking that apart and adding
sideEffectsdropped the size of the components, but there are still a couple issues remaining.Webpack is pulling in a
bufferpolyfill that is huge, probably because the Object value and parser reference the typeBuffer. I think this might just be something to change in thesizecommand webpack config but I need to check.The last optimization would be to just directly pull in the regex we need to detect firefox, so we don't need a full UA parser.