如何使用 vuetify 减少 vue js 构建大小？

Question

我使用 vue-cli 创建了一个项目，添加了 vuetify 和 vuetify-loader，生产模式下的最终构建大小很大，就好像所有 vuetify 组件都被导入一样。如何缩小生产规模？

UPD：我是 vue js 的新手，到目前为止对它知之甚少。我在某处读到 Vuetify-loader 会分析所使用的组件并将它们连接起来以减少组件大小，但这对我不起作用，即使没有组件，组件大小也很高。这是输出npm run build：

/  Building for production...

 WARNING  Compiled with 1 warnings                                                                                                                                                                      

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:
  app (472 KiB)
      css/chunk-vendors.bc54f729.css
      js/chunk-vendors.97235f99.js
      js/app.46f6da66.js

  File                                      Size             Gzipped

  dist\js\chunk-vendors.97235f99.js         228.10 KiB       76.89 KiB
  dist\js\app.46f6da66.js                   4.29 KiB         2.05 KiB
  dist\service-worker.js                    1.04 KiB         0.61 KiB
  dist\precache-manifest.9058d5d1f866160    0.76 KiB         0.35 KiB
  7d10739d8c19d6d73.js
  dist\js\about.de05c083.js                 0.40 KiB         0.28 KiB
  dist\css\chunk-vendors.bc54f729.css       239.39 KiB       25.81 KiB

Answer 1

所以，好消息是您已经在“点菜”模式下导入 Vuetify。这意味着 webpack 的摇树功能仅导入您正在使用的 Vuetify 组件。坏消息是，您可能无法将捆绑包的大小减少得更多，但我不会太担心，现在。

除非您的应用程序的用户将使用非常慢的连接（例如移动边缘或拨号），否则他们仍然可能会看到加载时间低于 1 秒。即使是 3G 连接也应该在 3-4 秒内加载。这是vue run build使用 Vue CLI 新创建的项目的 Vue UI 中命令的输出，即vue create myapp后跟vue use vuetify：

来自 Vue CLI 的构建大小警告看起来很可怕，但它们主要是想让您注意连接速度非常慢的用户。

为了进一步比较，如果你没有不是在“点菜”使用Vuetify（树摇）模式，在同一个项目的建筑面积是这样的：

Webpack Bundle Analyzer saved report to /Volumes/ClownCar/bentonmc/dev/playground-vuetify/dist/report.html
  File                                      Size             Gzipped

  dist/js/chunk-vendors.572394a1.js         964.61 KiB       227.31 KiB
  dist/js/app.612913d1.js                   8.41 KiB         3.35 KiB
  dist/service-worker.js                    1.05 KiB         0.61 KiB
  dist/precache-manifest.e297dd70e114a19    0.86 KiB         0.38 KiB
  dd9cc2b302d4a78ec.js
  dist/js/about.7c7cb591.js                 0.44 KiB         0.31 KiB
  dist/css/chunk-vendors.173d6f78.css       35.10 KiB        5.86 KiB

所以你可以看到，启用 tree-shaking 后，你的构建大小只有没有它时的三分之一。

关注包的大小是很好的，只要有可能，你应该延迟加载组件。用户最终仍然需要下载组件，但这种技术可以大大减少主包的大小，并允许在后台加载主页上不可见的组件。

但是，您不能延迟加载应用程序的主布局（即使用 的布局<v-app>），因此您的包大小必须大于 Vu​​e 推荐的目标大小。构建极快的现代 Web 应用程序并将包大小保持在即使在最慢的连接上也能正常工作的大小是非常具有挑战性的。也就是说，我相信使用像 Vuetify 这样的框架的好处是完全值得的。

更新：2020-12-23

我刚刚在 Medium 上找到了一篇更新的文章，其中包含更多细节和许多优化构建大小和加载时间的好策略。这绝对值得一读。