Vuetify：在 Nuxt.js 中自动摇树

Question

我正在尝试让 Nuxt.js / Vuetify 模块提供的自动 tree-shaking 功能正常工作。在我的 nuxt.config.js 中，我有：

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

然而，我目前只使用一两个组件，但我仍然得到一个非常大的 vendor.app（添加 treeshake 选项对大小没有影响）

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

注意指示大 vendors.app

的行

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

能请教一下吗？

Answer 1

我的错误，上面的配置工作正常。真正的问题是构建中包含的 CSS（对于所有组件）的文件大小。

对于遇到同样问题的人，将build: {analyze:true}添加到nuxt.config.js显示问题文件所在的位置（当运行 [=时自动在浏览器中打开window npm run build).

显然 main.sass 是这里的问题。我将在另一个问题中询问如何让 Nuxt/Webpack 仅对相关组件使用 CSS 模块的问题。文章 here 只展示了如何使用 CLI，而不是 Nuxt。

编辑： 我现在已经将 extractCSS:true 属性添加到我的 Nuxt 配置中，文件大小减少到几 kb..

build: {
    analyze:true,
    extractCSS: true
}

Vuetify：在 Nuxt.js 中自动摇树

Vuetify: Automatic treeshaking in Nuxt.js

tree-shaking

nuxt.js

vuetify.js