vue.js - Vue CLI 缩小了生产环境，但是如何缩短属性和其他定义呢？

Question

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

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

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

标签： vue.jsvuexobfuscationminify

Answer 1

Vue CLIterser-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）。