Uglify Does Not Uglify Enough on Latest Webpack + React 16

[iMerica]

Hi,

Thanks for your work on this library. I recently upgraded to the latest version of webpack and react and I'm now seeing the following in my console (in Production).

My webpack config looks kind of like this:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

var config = {
  entry: {
    public: APP_DIR + '/public.main.jsx',
    private: APP_DIR + '/private.main.jsx',
  },
  output: {
    path: BUILD_DIR,
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js",
  },
  plugins: [
    new webpack.EnvironmentPlugin(['NODE_ENV']),
    new webpack.DefinePlugin({
      'process.env': {
         NODE_ENV: JSON.stringify("production")
       }
    }),
    new webpack.optimize.CommonsChunkPlugin({
     name: 'init',
      filename: 'init.js',
    }),
    new UglifyJsPlugin({
      uglifyOptions:{
        output: {
          comments: false, // remove comments
        },
        compress: {
          unused: true,
          dead_code: true, // big one--strip code that will never execute
          warnings: false, // good for prod apps so users can't peek behind curtain
          drop_debugger: true,
          conditionals: true,
          evaluate: true,
          drop_console: true, // strips console statements
          sequences: true,
          booleans: true,
        }
      },
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    modules: [path.resolve(__dirname, 'react_components'), 'node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: false,
          plugins: [
            require.resolve('babel-plugin-transform-decorators-legacy'),
          ],
          presets: [
            require.resolve('babel-preset-react'),
            require.resolve('babel-preset-env'),
            require.resolve('babel-preset-stage-0')
          ]
        }
      }
    ]
  }
}

module.exports = config;

Thanks,

Michael

[nickells]

We were dealing with similar issues for a while. What it came down to was the following:

Uglify looks for the presence of if (process.env.NODE_ENV === 'production') blocks in your code and removes those because they always evaluate to false (through the evaluate rule). If React sees that there are any of these left, then the error pops up. You could do a manual search through your minimized code to see if these are appearing. Alternatively, you could wrap a console.log in that if statement to see if it shows up on your live site.

I see you already have evaluate on, so I would consider looking to make sure your process.env variables are being defined correctly. I'm wondering if you need both EnvironmentPlugin and DefinePlugin, as they seem to be doing the same thing and are possibly causing trouble with one another.

Another thing, DefinePlugin recommends you do the following to set variables:
'process.env.NODE_ENV': JSON.stringify("production"),, as it won't overwrite the existing process.env.

Finally, we had a problem with the -p flag in our package.json webpack script because it was overwriting our own Uglify options with a preset, "good-for-production" setting. So make sure you're not using that.

Hope one of these things helps!

Nick

[alexander-akait]

@iMerica @nickells please create minimum reproducible test repo.

[kzc]

Uglify looks for the presence of if (process.env.NODE_ENV === 'production') blocks in your code and removes those because they always evaluate to false (through the evaluate rule).

That's not correct. It's up to a webpack plugin to replace process.env.NODE_ENV with "production" before it is passed to uglify. At that point uglify would convert "production" === "production" to true and then retain or drop code accordingly.

[nickells]

@kzc Thanks for the clarification!

[csvan]

We were seeing the exact same thing until we set devtool: false for our production builds. This did not simply eliminate sourcemaps - it solved the fact that pretty much nothing was being minified at all (comments were left in, dead code, etc..). I don't fully understand the connection, but would try that.

[kzc]

Some webpack plugin ordering issue apparently:

webpack/webpack#6328

[kzc]

To avoid webpack.DefinePlugin altogether, just set the uglify compress option global_defs.

$ uglifyjs -V
uglify-es 3.3.7

$ cat minify.js 
var uglify = require("uglify-es");
var code = "if (process.env.NODE_ENV == 'production') prod(); else dev();";
var options = {
    compress: {
        global_defs: {
            "process.env.NODE_ENV": "production"
        }
    }
};
var result = uglify.minify(code, options);
if (result.error) throw result.error;
console.log(result.code);

$ node minify.js 
prod();

[alexander-akait]

@kzc very strange all works fine without global_defs in my repos

[kzc]

Those having issues with webpack.DefinePlugin in conjunction with other plugins can try that alternate global_defs approach.

[richtera]

It seems to be a size problem. When I initially tried to reproduce this with a smaller project it worked, when I added more code it failed. I put together a test project (it's in the issue referred to earlier webpack/webpack#6328) The project is https://github.com/richtera/webpack-project-for-debugging and will easily show the problem.

[richtera]

Which version of the UglifyJsPlugin accepts the global_defs option?

[kzc]

Which version of the UglifyJsPlugin accepts the global_defs option?

uglifyjs-webpack-plugin@1.x

[richtera]

I added a branch to my test project. I am observing errors also happen with global_defs usage (at least using webpack and uglifyjs-webpack-plugin@1.x) Curious, I see other people have success with this and it would make a lot of sense that it'd work. It's almost like something is minifying the code before it gets to either DefinePlugin or this UglifyPlugin and it already says something like e.env.NODE_ENV where e=process. This is not something either plugins will understand of course. I had previously tried to make "process" a variable that didn't get mangled and also had no success.

[kzc]

It's almost like something is minifying the code before it gets to either DefinePlugin or this UglifyPlugin and it already says something like e.env.NODE_ENV where e=process.

The fact that process was mangled to e suggests it's a local variable.

Uglify will not perform the global_defs substitution unless the process variable in process.env.NODE_ENV is global - hence the option name "global_defs"`.

$ cat test.js
function f(process) {
    console.log(process.env.NODE_ENV);
}

console.log(process.env.NODE_ENV);

$ bin/uglifyjs test.js -d process.env.NODE_ENV='"production"' -b
function f(process) {
    console.log(process.env.NODE_ENV);
}

console.log("production");