ReactJS使用Flux架构生成大型JS文件，这是最佳实践

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

本文关键字：文件 最佳 JS 大型 Flux 使用 ReactJS      更新时间：2023-09-26


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

由于有了JSX，我工作得很好，开发过程更快，代码也比其他框架更好但是如何缩小生产文件
我只为Flux架构提供了一些库Dispatcher and EventEmmiter。因此，这与在我的代码中使用未使用的库无关。我想这是因为我在写JSX，现在我在一个文件中有HTML+JS
拆分文件或缩小JS输出的最佳做法是什么

谢谢！

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

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

我看到有一些关于在不同页面使用React的信息，所以我从Gulp文档中学到了很多，我发现了很多非常小的JS库MicroJS，它们可以用4-6 KB的大小取代Dispatcher and EventEmmiter当然你需要用它们做一些手动操作，但它们在JS文件大小上节省了大约20倍。

这是我的Gulp文件，用于为每个页面生成缩小的react bundle 我使用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文件，用于处理包括AJAX功能在内的所有JavaScript。所以我在标记我的问题答案：）

谢谢你的帮助。

相关文章：