具有 Flux 架构的 ReactJS 生成大型 JS 文件，最佳实践是什么？

Question

我已经开始将 React 与 Flux 架构用于全功能前端应用程序，我真的很喜欢 JSX 和 Flux 方法，但主要问题是当我使用 Gulp, Babel and Uglyfy 构建 JSX 文件时我'我得到了大约 1mb 缩小的 JS 文件，没有缩小模式它几乎提供了 8mb 的 JS 文件。
那不是结束！用于发出 AJAX 请求 React 没有内置功能，所以 我还需要包括 jQuery

我工作得很好，开发过程更快，代码比其他框架更好感谢 JSX。 但是如何使生产文件变小？
我只包含了几个用于 Flux 架构的库 Dispatcher and EventEmmiter。所以这与我的代码中有未使用的库无关。我认为这是因为我正在编写 JSX，现在我在一个文件中有 HTML+JS。
拆分文件或使 JS 输出更小的最佳做法是什么？

谢谢！

Answer 1

有一些步骤可以减少生产规模：

使用 ReactJS 的生产版本，其中包括额外的性能优化并删除所有错误消息。
您不必包含整个 jQuery 库就可以使用 Ajax，我建议使用其他轻量级库来处理 ajax，例如reqwest or superagent.
当为生产构建时，分开两个 js 文件（或更多），通常我们将有一个名为 vendor.js 的文件用于所有库，而 app.js 仅用于我们制作的代码。这将利用浏览器上的缓存，因为 vendor.js 每次构建都不会改变太多。

Answer 2

我看到有一些关于在不同页面上使用 React 的信息，所以我从 Gulp documentation and I found a lot of very small JS libraries MicroJS 中学到了很多东西，它可以用 4-6 KB 的大小替换 Dispatcher and EventEmmiter 当然你需要用它们做一些手工工作，但它们节省了大约 20 倍的 JS 文件大小。

这是我的 Gulp 文件，用于为每个页面生成缩小的反应包。 我正在使用 Django 作为后端。

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");
    }]);
});

现在，对于每个逻辑页面，我得到了大约 40KB 个缩小的 JS 文件，用于处理所有 JavaScript 包括 AJAX 功能。所以我将我的问题标记为已回答:)

感谢您的帮助。

具有 Flux 架构的 ReactJS 生成大型 JS 文件，最佳实践是什么？

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

javascript

flux

reactjs

gulp

babeljs