ERROR in Encountered an error while minifying vendors.4ad37a88ed2ed9b181df.js:
Maximum call stack size exceeded
VUE项目使用Webpack3、webpack-parallel-uglify-plugin打包出现的问题。
babel先将ES6转为ES5,再用webpack-parallel-uglify-plugin压缩,webpack-parallel-uglify-plugin官方相关配置
module.exports = {
plugins: [
new ParallelUglifyPlugin({
// Optional regex, or array of regex to match file against. Only matching files get minified.
// Defaults to /.js$/, any file ending in .js.
test,
include, // Optional regex, or array of regex to include in minification. Only matching files get minified.
exclude, // Optional regex, or array of regex to exclude from minification. Matching files are not minified.
cacheDir, // Optional absolute path to use as a cache. If not provided, caching will not be used.
workerCount, // Optional int. Number of workers to run uglify. Defaults to num of cpus - 1 or asset count (whichever is smaller)
sourceMap, // Optional Boolean. This slows down the compilation. Defaults to false.
uglifyJS: {
// These pass straight through to uglify-js@3.
// Cannot be used with uglifyES.
// Defaults to {} if not neither uglifyJS or uglifyES are provided.
// You should use this option if you need to ensure es5 support. uglify-js will produce an error message
// if it comes across any es6 code that it can't parse.
},
uglifyES: {
// These pass straight through to uglify-es.
// Cannot be used with uglifyJS.
// uglify-es is a version of uglify that understands newer es6 syntax. You should use this option if the
// files that you're minifying do not need to run in older browsers/versions of node.
}
}),
],
};
这里有2个传递的配置,一个是uglifyJS
,一个是uglifyES
,两则选一个即可,选择uglifyJS会出现Maximum call stack size exceeded
,而uglifyES不会。
附我的webpack-parallel-uglify-plugin配置:
new ParallelUglifyPlugin({
cacheDir: 'node_modules/.cache/',
// 传递给 UglifyES的参数如下:
uglifyES: {
output: {
/*
是否输出可读性较强的代码,即会保留空格和制表符,默认为输出,为了达到更好的压缩效果,
可以设置为false
*/
beautify: false,
quote_style: 1, // 单引号
/*
是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false
*/
comments: false,
// max_line_len: true,
},
warnings: false,
// toplevel: true,
// mangle: true,
compress: {
/*
是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句
*/
drop_console: true,
/*
是否内嵌虽然已经定义了,但是只用到一次的变量,比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
转换,为了达到更好的压缩效果,可以设置为false
*/
collapse_vars: true,
/*
是否提取出现了多次但是没有定义成变量去引用的静态值,比如将 x = 'xxx'; y = 'xxx' 转换成
var a = 'xxxx'; x = a; y = a; 默认为不转换,为了达到更好的压缩效果,可以设置为false
*/
// reduce_vars: true
}
}
}),
题外:terser-webpack-plugin要webpack4才支持,然后webpack5是不需要这个插件的。另外terser-webpack-plugin-legacy给出是可以支持webpack3的,但本人测试并未生效,也不报错。