Vuetify：Nuxt.js 中的自动摇树

Question

我正在尝试使 Nuxt.js / Vuetify 模块提供的自动摇树功能正常工作。在我的 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                 

请注意指示大型 vendor.app 的行

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

你能给些建议么？

Answer 1

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

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

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

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

build: {
    analyze:true,
    extractCSS: true
}