javascript - 如何使用 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 run build 的输出Vue UI 中的命令，用于使用 Vue CLI 新创建的项目，即 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 .这绝对值得一读。