search

Wildhoney / ReactShadow

:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.
https://react-shadow.herokuapp.com/
MIT License
1.3k stars 80 forks source link

Heavy bundle size with styled components #104

Closed demfabris closed 3 years ago

demfabris commented 3 years ago

I'm making a embedabble widget with Preact + Styled components and ShadowDOM is a must for me But after implementing it i pretty much doubled my bundle size due to some required nodejs libs.

Here's a bundle analyzer ss: image

Apparently react-shadow is pulling again a 78kb styled-components package, is that expected? Seems like it doesn't recognize that i already have styled-components installed...

Also, as you can see, readable-stream and buffer are really heavy libs to pack into a tiny preact chatbot widget. Can you guys give me some guidance on reducing bundle size with react-shadow?

demfabris commented 3 years ago

Okay so i managed to port the source code into my application and saved about 100kb of bundle size. If anyone has the same issue feel free to contact me.

Wildhoney commented 3 years ago

Not too sure about why it's pulled in styled-components. I added react-dom/server to externals which has reduced dist/styled-components.js to 5.9k.