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

Question

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

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

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

Answer 1

Vue CLI 使用 terser-webpack-plugin 进行缩小，property mangling is disabled by default。你可以在你的 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 文档还推荐选择性属性重整（例如，仅将其应用于 names that match 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 下的属性个名称）。

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

Vue CLI minifies for production, but how can properties and other definitions also be shortened?

obfuscation

minify

vue.js

vuex