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

Question

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

更新： 我是 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

所以，好消息是您已经是importing Vuetify in "a la carte" mode。这意味着 webpack 的 tree-shaking 功能只是导入你正在使用的 Vuetify 组件。坏消息是，您可能无法将捆绑包的大小减少得比这更多，但我不会太担心，就目前而言。

除非您应用的用户使用非常慢的连接（例如移动边缘或拨号），否则他们仍然可能会看到不到 1 秒的加载时间。即使是 3G 连接也应该在 3-4 秒内加载。这是使用 Vue CLI 新创建的项目的 Vue UI 中 vue run build 命令的输出，即 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 后，您的构建大小只有不使用它时的三分之一。

关注捆绑包的大小非常好，只要有可能，您应该lazy load components。用户最终仍然需要下载组件，但这种技术可以显着减小主包的大小，并允许在后台加载主页上不可见的组件。

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

更新：2020-12-23

我刚刚找到a more recent article on Medium with more detail and a lot of great strategies for optimizing your build size and load times。绝对值得一读。