Vue CLI 为生产环境进行了缩减，但是如何才能缩短属性和其他定义呢？

Question

我查看了 Vue CLI 生成的输出文件（例如 app.4a7888d9.js），以查看实际减少的内容，我看到“数据”对象中声明的属性、方法对象中声明的方法等保留了其原始内容姓名。与 Vuex 状态属性相同。

我并不是想完全混淆我的代码，但我确实使用了相当长的描述性名称，这可能有利于缩小。请不要讨厌，但我拥有的属性名称的最坏情况示例是ScheduledTransactionConditionActiveComponent

除了 cli 默认情况下执行的操作之外，还有更好的方法来实现缩小吗？如果我应该为此使用不同的包，是否有一个经过验证的 vue 包？

Answer 1

Vue CLI 用于terser-webpack-plugin缩小，默认情况下禁用属性修改。您可以在 Vue 配置中启用它，如下所示：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      const opts = args[0]

      opts.terserOptions.mangle = {
        ...opts.terserOptions.mangle,
        properties: true, // mangle all property names
      }

      return args
    })
  }
}

Terser 文档还建议选择性属性修改（例如，仅将其应用于与a 匹配的名称regexp）。例如，您可以将 Terser 配置为仅修改以下划线结尾的属性：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      const opts = args[0]

      opts.terserOptions.mangle = {
        ...opts.terserOptions.mangle,
        properties: {
          regex: /_$/, // mangle property names that end with "_"
        },
      }

      return args
    })
  }
}

注意：虽然这对于数据属性来说效果很好，但这种修改对于组件名称（即 下的属性名称）不起作用components。