Vuetify：Nuxt.js 中的自动 treeshaking答案

【问题标题】：Vuetify: Automatic treeshaking in Nuxt.jsVuetify：Nuxt.js 中的自动 treeshaking
【发布时间】：2019-12-10 09:12:11
【问题描述】：

我正在尝试让 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

你能建议吗？

【问题讨论】：

标签： vuetify.js nuxt.js tree-shaking

【解决方案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
}

【讨论】：

当你说几 kb 的时候是 277.24kb 左右？