Treeshaking fails at CSS

[bengineer19]

Module version 1.11.0

Describe the bug Even with treeshaking enabled, Vuetify includes a large amount of unneeded CSS when the nuxt project is built.

To Reproduce Build any nuxt-vuetify project, open Chrome devtools, go to Sources, open Coverage tab, observe how much CSS (and JS) is unused.

By default this is included in vendors.js as main.sass, but setting extractCSS: true in webpack config pulls out the CSS into a separate file, where the inefficiency can be clearly viewed. I have included a pic of one of my projects in the screenshots section below. The CSS which is inlined in HTML files also has plenty of waste.

This occurs for the quickstart create-nuxt-app default page, and the default code sandbox https://codesandbox.io/s/nuxtjs-vuetify-v0k7i.

Expected behavior Would like only the necessary CSS to be shipped to the browser.

Screenshots

[mathe42]

You are in Development mode? Try it in production => optimized build.

[bengineer19]

No, this is after running nuxt build then nuxt start. NODE_ENV is set to production and nuxt build logs "production build".

[mathe42]

OK strange...

[bengineer19]

Here is the coverage of the default app created from the quickstart, running after $ npm run build && npm run start. In nuxt.config.js I set treeShake: true and extractCSS: true

To be clear, this appears to suggest that every project using this module ships 283kB of CSS to the browser, of which over 90% is unused for most applications.

[yohane55]

when I set extractCSS: true, it usually increases the bundle size. try building without it.

[little3201]

does it occurred when use vuetify only with vue?

[dor272]

Having the same issue. I use SSG and I get FOUC probably because of the time it takes to load the entire css of vuetify instead of very little that is actually used.

any way around it?

[Guebbit]

Interested and following. I'd love to include some of vuetify plugins and optimize everything

[ReindDooyeweerd]

Same here, just made a fresh project, cleaned out all the default stuff inside index.vue so nothing of Vuetify should be loaded, did a build and it serves a 314KiB css file with all the Vuetify css in it.

Vuetify related stuff inside my nuxtjs.config.js,

  vuetify: {
    treeShake: true,
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    // analyze: true,
    extractCSS: true,
  },

You would expect a small css bundle size but it's huge instead. Anyone who has a solution for this?

[kat3su]

I ran to the same issue too. Only use one VDatePicker component however the building includes the whole main.sass css which is where the 300kb comes from.

[mathe42]

main.scss is allways included.

[mathe42]

See also #382

[kat3su]

Not sure if we have any potential fix for this. main.scss is big and including some reset css which affect the global styling