vuetify.js - Vuetify : Automatic treeshaking in 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                 

注意指示大型vendors.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 模块用于相关组件的问题。文章here仅显示如何使用 CLI 进行操作，而不是 Nuxt。

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

build: {
    analyze:true,
    extractCSS: true
}