ReactJS with Flux architecture generating large JS files, what is the best practice?

Question

I've started using React with Flux architecture for full functional frontend application, and I really liked approach JSX and Flux , but the main issue is that when I'm building JSX files using Gulp, Babel and Uglyfy I'm getting about 1mb minified JS file, without minified mode it is giving almost 8mb of JS file.
And that's not the end !! for making AJAX requests React don't have built in functionality, so I need also include jQuery

I's working well, development process is faster and code is nicer than with other frameworks thanks to JSX. But how to make production files smaller ?
I'm including just a few libs Dispatcher and EventEmmiter for Flux architecture. So it's not about having unused libs in my code. I think it is because I'm writing JSX and now I have HTML+JS in one single file.
What is the best practice to split files or make JS output more smaller ?

Thanks !

Answer 1

I saw that there is a little information about using React for different pages, so I learned a lot from Gulp documentation and I found a lot of very small JS libraries MicroJS which could replace Dispatcher and EventEmmiter with just a 4-6 KB in size of course you need to do some manual work with them, but they saving about 20 times in JS file size.

Here is my Gulp file for generating minified react bundle for each page. I'm using Django for backend.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');
var source = require('vinyl-source-stream');
var browserify = require('gulp-browserify');
var reactify = require('reactify');
var babelify = require('babelify');
var streamify = require('gulp-streamify');
var fs = require("fs");
var rename = require("gulp-rename");

var path = {
  APP_DIR: './apps/*.jsx',
  OUT_DIR: './../static/apps',
};

process.env.NODE_ENV = 'development';

gulp.task('jsx', function() {

    return gulp.src([path.APP_DIR])
        .pipe(browserify({
            insertGlobals : true,
            debug : true,
            transform: [reactify, babelify.configure({
                presets: ["es2015", "react"]
            })],
        }))
        .pipe(rename({
            extname: ".min.js"
        }))
        .pipe(gulp.dest(path.OUT_DIR));

});
gulp.task('jsx_min', function() {

    return gulp.src([path.APP_DIR])
        .on('error', function (error) {
            console.log(error);
        })
        .pipe(browserify({
            insertGlobals : true,
            debug : false,
            transform: [reactify, babelify.configure({
                presets: ["es2015", "react"]
            })],
        }))
        .pipe(streamify(uglify().on('error', function (e) {
            console.log(e);
        })))
        .pipe(rename({
            extname: ".min.js"
        }))
        .pipe(gulp.dest(path.OUT_DIR));

});


gulp.task('build', ['jsx_min']);

gulp.task('default', ['jsx'], function () {
    return gulp.watch([path.APP_DIR], ['jsx', function () {
        var current_date = new Date();
        var time = current_date.getHours() + ":" + current_date.getMinutes() + ":" + current_date.getSeconds();
        console.log(time, " -> Rebuilding");
    }]);
});

Now for each logical page I got about 40KB minified JS file for handling all JavaScript including AJAX functionality. So I'm marking my question answered :)

Thanks for help.