Browserify + gulp 变慢答案

【问题标题】：Browserify + gulp becoming slowBrowserify + gulp 变慢
【发布时间】：2014-10-16 18:59:05
【问题描述】：

每当 js 文件更改时，我们一直在使用 gulp 和 browserify 来创建项目的构建。随着项目的发展，这个过程变得非常缓慢，从 200ms -> ~5s。该项目有 69 个目录、173 个文件和 4 个文件夹的最大深度。我们正在应用一些变换。这是我们的构建代码。

var buildJS = function (entryPoint, name, cb) {
    var browserify = require('browserify');
    var uglify = require('gulp-uglify');
    var source = require('vinyl-source-stream');
    var buffer = require('vinyl-buffer');
    var reactify = require('reactify');
    var literalify = require('literalify');
    var brfs = require('brfs');

    browserify()
        .require(entryPoint + '/' + name + '.jsx')
        .transform({
           global: true
        }, reactify)
        .transform({
           global: true
        }, brfs)
        .transform({
           global: true
        }, literalify.configure(literalifyConfig))
        .external(config.libs)
        .bundle({
            debug: config.DEV,
            //detectGlobals : false
        })
        .on('error', handleError)
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(gulpIf(!config.DEV, uglify()))
        .pipe(gulp.dest(config.buildPath + '/' + name))
        .on('finish', cb)
};

这只是基于我们项目规模的正常行为吗？还是我们做错了什么？

【问题讨论】：

项目文件的实际“大小”是多少。这可能相当于大量并发 I/O，具体取决于您调用 buildJS 的方式。你有多个构建过程吗？还是只有这个？
我想说的是，你真的需要做所有这些'为了发展'。也许您可以减轻一些痛苦并削减一些任务（将此构建过程仅用于测试/部署）。
本文建议使用 watchify 和 browserify 进行增量构建：blog.avisi.nl/2014/04/25/…
还有 gulp 配方：github.com/gulpjs/gulp/blob/master/docs/recipes/…
@livepo 单个文件非常小，大约 300 行。此构建确实单独运行（每当我们更新 js 文件时）。这个构建过程是必要的，因为代码是用 JSX 和节点样式编写的，所以不适合发送给客户端。

标签： javascript gulp browserify

【解决方案1】：

那是因为browserify 总是重新编译所有内容。如果你想要好的性能，你应该使用增量构建。我为此专门开发了一个 gulp 插件：https://github.com/ngryman/gulp-bro。

【讨论】：