Skip to content

Proper React minification #2200

Closed
Closed
@mattijsbliek

Description

@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');

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions