在本文开始之前,先留一个问题?
如果在新版本我想加一个
drop_console
的配置呢?
在老版本
的脚手架生成的配置中,对于线上环境的文件:webpack.prod.conf.js
使用了插件:uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
插件配置如下:
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
]
我们看一下新版本的是如何处理的呢?
在文件:@vue/cli-service/lib/config/prod.js
中:
先有一个判断,测试环境不压缩:通过 optimization.minimize
if (process.env.VUE_CLI_TEST) {
webpackConfig.optimization.minimize(false)
}
然后如果不是测试环境:
第一步也是加载插件 uglifyjs-webpack-plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')
第二步进行插件配置:通过 optimization.minimizer
webpackConfig.optimization.minimizer([
new UglifyPlugin(uglifyOptions(options))
])
这里的内置配置有哪些呢?我们看看 uglifyOptions.js 文件:
相比之前的 uglifyOptions 要多很多:
module.exports = options => ({
uglifyOptions: {
compress: {
// turn off flags with small gains to speed up minification
arrows: false,
collapse_vars: false, // 0.3kb
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
inline: false,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
switches: false,
toplevel: false,
typeofs: false,
// a few flags with noticable gains/speed ratio
// numbers based on out of the box vendor bundle
booleans: true, // 0.7kb
if_return: true, // 0.4kb
sequences: true, // 0.7kb
unused: true, // 2.3kb
// required features to drop conditional branches
conditionals: true,
dead_code: true,
evaluate: true
},
mangle: {
safari10: true
}
},
sourceMap: options.productionSourceMap,
cache: true,
parallel: true
})