Vuetify: [Feature Request] Support for purgecss/purifycss

[husayt]

New Functionality

currently vuetify projects result in big css files.

Improvements

This will allow to drastically minimize size of css artefacts.

Bugs or Edge Cases it Helps Avoid

currently trying to implement this for nuxt following the example https://www.purgecss.com/Nuxt.html, results in vuetify layouts getting broken. A working example with purgecss would allow to get very slim vuetify solutions

[johnleider]

Can you please post your implementation attempt?

[philwolstenholme]

I've done this on a non-Vuetify project using Purgecss's Webpack plugin: https://www.purgecss.com/with-webpack.html

I'm not sure how well this would work with Vuetify, there would need to be a mechanism to read the user's template files to see which <v- (Vuetify) components were being used, then whitelist the CSS classes potentially used by those components so Purgecss did not remove those classes.

[nekosaur]

If you use our a-la-carte process only the css for those components you import (and their dependencies) will be used.

[husayt]

@johnleider here is the implementation you asked for.

https://github.com/husayt/nuxt-vuetify-purgecss

As you can see with npm run build and npm run start layout just breaks apart

[husayt]

@nekosaur I tried with a-la-carte and it still didn't work. Maybe I didn't include vuetify components properly?

[scp-nm]

This would definitely be handy, especially if you’re 6 months into building a web app and don’t have the time to go back and do a-la-carte.

[KaelWD]

I don't really see how this would be possible, there's load of classes that are applied at runtime. Vuetify's CSS isn't huge anyway, only like 60KB gzipped.

@scp-nm It shouldn't be that hard to do with an existing project, you just have to figure out which components you're using and change what you're importing to match.

[scp-nm]

@KaelWD - thanks for the response, my own efforts to get PurgeCSS working are proving fruitless (but errorful). I'm starting to realise that I'm probably going to have to take a weekend out, review the a-la-carte docs and get it done. Appreciate the feedback :)