Maximum call stack size exceeded

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的,但本人测试并未生效,也不报错。

本条目发布于。属于科技分类。作者是

关于有个狸

2005年开始的一名站长,从事网站策划、运营,早期一批扎根阿里妈妈、Google Adsense的一员,目前司职前端与产品设计。

发表回复