使用 UglifyJS 插件优化 Webpack 导致运行时错误

Question

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

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

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

我试过：

webpack -p
webpack -optimize-minimize

或在配置中：

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

但都导致相同的运行时错误（未定义的变量）。

是否有任何明显的原因可能导致此问题？ Uglify 是否过于热心并删除了不应该删除的内容？

Answer 1

问题是由 Uglify mangler 引起的。在不知道哪个变量重命名导致问题的情况下，解决方案是完全关闭重命名：

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

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

var config = {

  //... various config settings

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

Answer 2

对于那些停用 mangle 但仍然有问题的人，请检查您是否使用 -p 参数构建。看起来 -p 也破坏了输出，在我的例子中，我不得不将 UflifyJsPlugin mangle 切换为 false 并在没有 -p 标志的情况下构建以使其工作（代价是 js 的重量增加了大约 50 %)

Answer 3

我使用以下方法解决了这个问题（我使用的是 Webpack 4.5）：

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.

时它对我不起作用

使用 UglifyJS 插件优化 Webpack 导致运行时错误

Webpack optimize with UglifyJS plugin causes runtime error

javascript

uglifyjs

reactjs

webpack