Proper React minification

[mattijsbliek]

I'm wondering about the best way to minify React for production builds.

The guide @christianalfoni wrote for #2046 is very comprehensive so I used it as a boilerplate. However, after adding envify, uglify, and uglifyify, my build is 131KB, 5KB bigger then the standard react.min.js.

Uglifyify doesn't seem to be doing anything so I'm guessing that's the problem. But since there are so many moving parts it's hard to pin down exactly what's going wrong, so some kind of boilerplate would be great.

My gulp task looks like this:

gulp.task('build', function() {
    return browserify({
            entries: ['./src/main.js'],
            transform: [
                uglifyify, envify
            ],
            debug: false,
        })
        .bundle()
        .pipe(source('main.js'))
        .pipe(buffer())// Convert from streaming to buffered vinyl file object
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

main.js looks like this:

var React = require('react');

[killercup]

Since you already include the uglifyify transform, the repeated call to uglify won't do much.

IIRC, browserify doesn't minfy the file paths in require calls. But there is https://github.com/substack/bundle-collapser for that.

---

In production, I'm using webpack with basically this config (for testing purposes, the vendor file only includes react):

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: JSON.stringify(env.name),
      BROWSER: JSON.stringify(true)
    }
  })
  new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor-[chunkhash].js', Infinity)
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(true),
  new webpack.optimize.UglifyJsPlugin()
]

The output file is 106kB, react.min.js is 124kB. I'm not sure what the exact difference is, but my build doesn't include a license header for example.

[zpao]

I bet the transforms run in order, so uglifyify, envify probably needs to be reversed. The envify transform is the one that will make sure you actually have dead code paths (specifically dead require code paths) that uglifyify removes.

[zpao]

This isn't really an issue with React so I'm going to close this out. Feel free to keep discussing though. In the future, this might be a better question for stack overflow or the mailing list.

[mattijsbliek]

Thanks for the tips guys, I'll take it up with uglifyify

[zpao]

I don't think there's anything to take up, uglifyify just doesn't know code is dead yet so it can't remove it until after you run envify.