primer / react

An implementation of GitHub's Primer Design System using React
https://primer.style/guides/react
MIT License
3.03k stars 524 forks source link

The theme object inflates bundle size. #4432

Open cihad opened 3 months ago

cihad commented 3 months ago

Description

theme object gets total 9 colorSchemes. And importing these color schemes under the themes object does not allow tree shaking. I bundled only theme object:

Capture

Only theme object took 327 Kb | gzip: 52 Kb.

I recommend export each color scheme something like import { light, dark } fro "@primer/react/color-schemes". And it can be pass the <ThemeProvider> as generated theme object. Because overall UI's don't need more than 2 schemes.

Steps to reproduce

  1. Go to Stackblitz example
  2. Run npm run build
  3. See the results.

Version

^36.12.0

Browser

No response

siddharthkp commented 3 months ago

Hi! Thanks for taking the time to report this!

Good news: This current solution is temporary and we are already discussion a replacement which should lead to a much smaller bundlesize (not too dissimilar than the one you suggested)

Bad news: It's still in the planning phase so I don't have a exact date for you right now when that change will happen

Until then, I'm not sure if there is an easy workaround 🤔