search

VandyHacks / vaken

Next-gen hackathon registration system
MIT License
49 stars 12 forks source link

Test separating CSS files from bundle #354

Open bencooper222 opened 5 years ago

bencooper222 commented 5 years ago

The case from Slack:

1) with http/2, requests can take place async so it's best to have a bunch of medium sized things instead of one huge thing 2) any change to the app changes the bundle hash which breaks caching. Theoretically, if CSS was separate, changing app functionality wouldn't affect the CSS hash and would allow caching 3) allows us to analyze CSS bundle size separately 4) separate css files are generally faster from the benchmarks I can find.

It'll be supported once https://github.com/webpack-contrib/style-loader/pull/406 is published to the registry (and not, just on the master branch which also serves as their public documentation because that's just a great setup)

leonm1 commented 5 years ago

I think the real blocker on this is that css is all via styled-components right now which means it's not actually css and it's generated in JS

bencooper222 commented 5 years ago

There's definitely ways to extract them - but yeah, that doesn't make it easier.

leonm1 commented 5 years ago

I not sure that's quite the case, but I could be wrong.

Here's a couple articles on how styled does it's magic (I'll post them in the VH slack for additional educational reading); all three cover how styled works rather than how to use it, and the second one starts roughly where the first ends and the third provides a general overview followed by more under-the-hood stuff that isn't covered by the first two: https://mxstbr.blog/2016/11/styled-components-magic-explained/ https://medium.com/@_jmoller/how-does-styled-components-work-under-the-hood-28cb035d48c6 https://medium.com/styled-components/how-styled-components-works-618a69970421

Most of the styling we use in vaken uses value interpolation pretty heavily so I don't think we'd be able to extract it without ripping out styled into dynamic imports everywhere.

cktang88 commented 5 years ago

found https://github.com/styled-components/styled-components/issues/1018#issuecomment-316827497