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

Posted 2023-02-22

【中文标题】具有 Flux 架构的 ReactJS 生成大型 JS 文件，最佳实践是啥？

【英文标题】：ReactJS with Flux architecture generating large JS files, what is the best practice?具有 Flux 架构的 ReactJS 生成大型 JS 文件，最佳实践是什么？

【发布时间】：2016-02-24 14:55:49

【问题描述】：

我已经开始将 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 输出更小的最佳做法是什么？

谢谢！

【问题讨论】：

你可以做的是从缩小的 JS 中删除你的库，你可以使用 google cdn 来包含这些库，因为其中一些库已经缓存在用户浏览器中，你会减少你的服务器带宽使用率

【参考方案1】：

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

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

【讨论】：

酷！在某些情况下，这似乎是一个解决方案……但我仍在努力寻找比浏览器缓存更好的解决方案，我也在考虑让服务器端渲染仅针对特定页面渲染 JSX 文件……有可能吗?

是的，你可以，我已经阅读了一些关于服务器端渲染的教程，例如reactjsnews.com/isomorphic-javascript-with-react-node

如果你切换到 Webpack（更适合 ReactJS 开发），这里有一个非常接近你意图的教程：jxnblk.com/writing/posts/…

【参考方案2】：

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

这是我的 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 功能。 所以我将我的问题标记为已回答:)

感谢您的帮助。