Treeshaking fails at CSS

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2

Other

627 stars 105 forks source link

Treeshaking fails at CSS #342

Open bengineer19 opened 4 years ago

bengineer19 commented 4 years ago

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 commented 4 years ago

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

bengineer19 commented 4 years ago

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

mathe42 commented 4 years ago

OK strange...

bengineer19 commented 4 years ago

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 commented 4 years ago

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

little3201 commented 4 years ago

does it occurred when use vuetify only with vue?

dor272 commented 4 years ago

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 commented 4 years ago

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

ReindDooyeweerd commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

main.scss is allways included.

mathe42 commented 3 years ago