Perf: Better Tree Shaking

[tylerkrupicka]

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/theme was never tree shaking based on usage.
• AutoThemeProvider was pulling in all of ua-parser-js and all themes.

Breaking that apart and adding sideEffects dropped the size of the components, but there are still a couple issues remaining.

Webpack is pulling in a buffer polyfill that is huge, probably because the Object value and parser reference the type Buffer. I think this might just be something to change in the size command webpack config but I need to check.

• Relevant webpack docs
• DS-CLI Size config

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.

[tylerkrupicka]

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 📦🚀

[tylerkrupicka]

Build Info

Your PR was successfully deployed by CircleCI #333

Storybook

[tylerkrupicka]

🚀 PR was released in v1.0.3 🚀