关于javascript：使用UglifyJS插件进行Webpack优化会导致运行时错误


Webpack optimize with UglifyJS plugin causes runtime error

我有一个同构的React应用程序，该应用程序通过webpack捆绑在一起。

我有2个入口点，分别对应2个捆绑的文件输出：vendors.js和app.js。

在运行webpack-dev-server或不带任何优化标志的编译时，一切正常。但是，一旦我尝试使用Uglify插件，编译后的输出就会包含错误。

我尝试过：

1
2
webpack -p
webpack -optimize-minimize

或在配置中：

1
new webpack.optimize.UglifyJsPlugin({sourceMap:false})

但是所有这些都会导致相同的运行时错误(未定义的变量)。

是否有明显的原因可能导致此？ Uglify是否过分热心并删除了不该删除的内容？

相关讨论

该问题是由Uglify破坏者引起的。不知道哪个变量重命名会导致问题，解决方案是完全关闭重整：

1
2
3
4
new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false
})

这应该作为Webpack插件添加到您的配置文件中，例如：

1
2
3
4
5
6
7
8
9
10
11
var config = {

  //... various config settings

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      mangle: false
    })
  ]
};
相关讨论

对于那些取消激活mangle仍存在问题的用户，请检查是否使用-p参数进行构建。看来-p也会破坏输出，在我的情况下，我不得不将UflifyJsPlugin mangle切换为false并在没有-p标志的情况下进行构建才能使其工作(以增加js权重约50的代价) ％)

我通过以下操作(我正在使用Webpack 4.5)解决了此问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var config = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          safari10: true,
          mangle: {
            safari10: true,
          }
        }
      })
    ]
  }
};

来自https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options：

safari10 (default false) -- Pass true to work around the Safari 10 loop iterator bug"Cannot declare a let variable twice". See also: the safari10 output option.

还请注意，它在optimization.minimizer中。当我将其放入plugins时，它对我不起作用。