Vue CLI缩小了生产版，但如何缩短属性和其他定义

Question

我查看了Vue CLI生成的一个输出文件(例如app.4a7888d9.js(，以查看实际减少的内容，我发现在"data"对象中声明的属性、在methods对象中宣布的方法等都保留了其原始名称。与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文档还建议对属性进行选择性篡改(例如，只将其应用于与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下的属性名称(不起作用。