我已经开始将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输出更小的最佳做法是什么？
谢谢！
答案 0 :(得分：2)
有一些措施可以减少产量：
vendor.js的文件，并为我们制作的代码创建app.js。这将利用浏览器上的缓存，因为vendor.js每次构建都不会改变很多。答案 1 :(得分：-1)
我看到有关于将React用于不同页面的一些信息，所以我从Gulp documentation学到了很多东西，我找到了许多非常小的JS库MicroJS，可以替换{{1只有4-6 KB的大小当然你需要用它们做一些手动工作，但它们在JS文件大小中节省了大约20倍。
这是我的Gulp文件，用于为每个页面生成缩小的反应束。 我正在使用Django作为后端。
Dispatcher and EventEmmiter现在，对于每个逻辑页面，我获得了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");
}]);
});
缩小的JS文件，用于处理包括AJAX功能在内的所有JavaScript。
所以我正在回答我的问题：）
感谢您的帮助。