search

bigardone / phxsockets.io

Phoenix sockets and channels GUI client
http://phxsockets.io/
16 stars 0 forks source link

Reduce size of CSS (specifically Semantic UI) #1

Open asianfilm opened 6 years ago

asianfilm commented 6 years ago

Added this for purely selfish reasons as my own Elm app has over 10,000 lines of CSS (predominantly from Semantic UI) that I deliver in a production app as a 244KB file, by only requiring the CSS for components I need. I'd like it much smaller. My 2000 line Elm app compiles to a 186KB javascript file.

The size here is 607KB, presumably because it's pulling in everything from Semantic UI. Obviously this will be cached on browsers (and perhaps GZipped for an even smaller deliverable) so maybe it's not a problem worth putting great effort into solving. But it's been bugging me for months.

I've tried various plugins with Webpack and failed to find any that successfully strip out the unused CSS. Running my application, a SPA (single page application), with Chrome Developer Tools' new Coverage tab recording, I can see that 90% of the CSS is not being used.

So, feasibly, I could on occasion go through my CSS file manually stripping out unused CSS as marked in red by Chrome. But other tools I've used to strip out unused CSS were inaccurate and left me with a broken website, so I'm not sure I have confidence in Chrome to get it right also.

Anyway, if anybody has experience getting their Semantic UI files smaller automatically...

bigardone commented 6 years ago

You are totally right! This is something which I already have on my todo list :) What I usually do is adding the whole Semantic UI styles, and once I have all the basic layout ready, take the parts that I need to create my custom styles. Thanks for reminding me of it though, I'll solve it asap!