【问题标题】:after bundle, vuetify takes 500kb bundle size捆绑后,vuetify 需要 500kb 捆绑大小
【发布时间】:2019-12-19 07:48:37
【问题描述】:

我正在为生产而构建。 npm run build --report

我正在使用 vue 和 vuetify。

运行上述命令后,我可以看到 vuetify 在捆绑后占用了大量空间。

stat size: 1.05MB
parsed size: 500kb
gziped size: 102kb.

看起来 500kb 真的很大。为什么会这样?我怎样才能降低它?

我尝试使用 a-la-carte,从 500kb 减少到 360kb。不过,我没有使用很多组件。

【问题讨论】:

  • 这不会让我感到惊讶。 Vuetify 是一个相当大的库
  • 有没有比 vuetify 更小的 vue.js 库?
  • vue 有很多好的 ui 框架。我会货比三家。 Buefy 非常轻量级。另一种选择是仅加载这些框架的 css 并自己构建 js 功能。这一切都取决于您需要什么以及您愿意做出哪些权衡。
  • 另一个令人困惑的部分是安装程序添加了一个路径import vuetify from './plugins/vuetify',但在线文档声称它是“自动的”并使用import Vuetify from 'vuetify/lib'。我无法对 TypeScript 感到满意,我也怀疑这是一个错误,甚至尝试。花更多时间进行配置,减少编码时间。

标签: vue.js vuejs2 vue-component vuetify.js


【解决方案1】:

使用官方的vuetify loader,让它为您摇树a-la-carte。并使用 webpack 或 vue-cli-3 将 vuetify 代码捆绑到单独的下载中

可能有点large,但您的用户不会后悔额外的下载大小,特别是如果它只需要在单独的捆绑包中第一次发生。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-20
    • 1970-01-01
    • 1970-01-01
    • 2016-03-26
    • 2014-08-29
    • 1970-01-01
    相关资源
    最近更新 更多