Vuetify: Automatic treeshaking in Nuxt.js

Question

I'm trying to get the automatic tree-shaking functionality provided by the Nuxt.js / Vuetify module working. In my nuxt.config.js I have:

buildModules: [
    ['@nuxtjs/vuetify', {treeShake: true}]
],

However, I'm only using one or two components at the moment, but I'm still getting a very large vendor.app (adding the treeshake option had no effect on size)

Hash: 9ab07d7e13cc875194be
Version: webpack 4.41.2
Time: 18845ms
Built at: 12/10/2019 11:04:48 AM
                         Asset       Size  Chunks                                Chunk Names
../server/client.manifest.json   12.2 KiB          [emitted]                     
       5384010d9cdd9c2188ab.js    155 KiB       1  [emitted] [immutable]         commons.app
       706a50a7b04fc7741c9f.js   2.35 KiB       4  [emitted] [immutable]         runtime
       8d5a3837a62a2930b94f.js   34.7 KiB       0  [emitted] [immutable]         app
       9d5a4d22f4d1df95d7a7.js   1.95 KiB       3  [emitted] [immutable]         pages/login
                      LICENSES  389 bytes          [emitted]                     
       a0699603e56c5e67b811.js    170 KiB       6  [emitted] [immutable]         vendors.pages/login
       b1019b7a0578a5af9559.js    265 KiB       5  [emitted] [immutable]  [big]  vendors.app
       b327d22dbda68a34a081.js   3.04 KiB       2  [emitted] [immutable]         pages/index
 + 1 hidden asset
Entrypoint app = 706a50a7b04fc7741c9f.js 5384010d9cdd9c2188ab.js b1019b7a0578a5af9559.js 8d5a3837a62a2930b94f.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  b1019b7a0578a5af9559.js (265 KiB)
ℹ Generating pages                                                                                               11:04:48
✔ Generated /                                                                                                    11:04:48
✔ Generated /login                 

Notice the line indicating the large vendors.app

Notice: b1019b7a0578a5af9559.js 265 KiB 5 [emitted] [immutable] [big] vendors.app

Can you please advise?

Answer 1

My mistake, the above configuration is working correctly. The real issue is the file size of the CSS being included (for all components) included in the build.

For people suffering from the same problem, adding build: {analyze:true} to nuxt.config.js shows where the problem files are (automatically opens in a browser window when running npm run build).

Clearly main.sass is the issue here. I will ask the question of how to get Nuxt/Webpack to only use CSS modules for relevant components in another question. The article here only shows how to do it with the CLI, not Nuxt.

Edit: I've now added the extractCSS:true property to my Nuxt config and the file size is reduced to a few kb..

build: {
    analyze:true,
    extractCSS: true
}