Vue CLI简化了生产，但是如何缩短属性和其他定义？

Question

我查看了Vue CLI生成的输出文件（例如app.4a7888d9.js），以查看实际减少了什么，我看到保留在'data'对象中声明的属性，在methods对象中声明的方法等。他们的原名。与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配置为仅修饰以下划线结尾的属性：

regexp

注意：尽管这对数据道具很有效，但是这种处理不适用于组件名称（即

// 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
    })
  }
}

下的属性名称）。