Browserify+Watchify+Tsify+Gulp的性能问题

Question

我有一个"中等"Typescript应用程序（如在成千上万行的企业级应用程序中），它依赖于jQuery、React和SocketIO以及其他较小的库。

我当前的gulpfile是：

var gulp = require("gulp"),
    $ = require("gulp-load-plugins")(),
    _ = require("lodash"),
    tsify = require("tsify"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream"),
    debowerify = require("debowerify"),
    watchify = require("watchify"),
    lr = require("tiny-lr"),
    buffer = require("vinyl-buffer");
var lrServer = lr();
var config = {
    scripts: {
        base: __dirname + "/Resources/Scripts",
        main: "Application.ts",
        output: "App.js"
    },
    styles: {
        base: __dirname + "/Resources/Styles",
        sheets: ["Application.less", "Preload.less"],
        autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
    },
    publicPath: __dirname + "/wwwroot"
};
function printError(err) {
    $.util.log($.util.colors.red.bold(err.type + " " + err.name + ":"), $.util.colors.white(err.message));
    this.emit("end");
}
function buildScripts(watch, debug) {
    var bundler = browserify({
            basedir: config.scripts.base,
            debug: false,
            entries: [config.scripts.base + "/" + config.scripts.main],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify, {
            module: "commonjs",
            target: "es5",
            jsx: "react"
        })
        .transform(debowerify);
    function build() {
        return bundler.bundle()
            .on("error", printError)
            .pipe(source(config.scripts.output))
            .pipe($.if(!debug, buffer()))
            .pipe($.if(!debug, $.uglify()))
            .pipe(gulp.dest(config.publicPath + "/" + "scripts"));
    }
    if (!watch)
        return build();
    bundler
        .plugin(watchify)
        .on("update", function () {
            $.util.log($.util.colors.grey("Building scripts..."));
            build();
        })
        .on("time", function (timeMs) {
            $.util.log(
                $.util.colors.grey("Finished"),
                $.util.colors.cyan("'dev.scripts.watch' after"),
                $.util.colors.magenta(timeMs.toLocaleString() + " ms"));
        });
    return build();
}
gulp.task("prod.scripts", function() {
    return buildScripts(false, false);
});
gulp.task("dev.scripts", function () {
    return buildScripts(false, true);
});
gulp.task("dev.scripts.watch", function () {
    return buildScripts(true, true);
});
gulp.task("prod.styles", function () {
    return gulp
        .src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
        .pipe($.less())
        .on("error", printError)
        .pipe($.autoprefixer(config.styles.autoprefixer))
        .pipe($.uglifycss())
        .pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles", function () {
    return gulp
        .src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
        .pipe($.sourcemaps.init())
        .pipe($.less())
        .on("error", printError)
        .pipe($.autoprefixer(config.styles.autoprefixer))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles.watch", ["dev.styles"], function () {
    return gulp.watch(config.styles.base + "/**/*.{css,less}", ["dev.styles"]);
});
gulp.task("dev.watch", ["dev.scripts.watch", "dev.styles.watch"], function () {
    lrServer.listen(35729);
    gulp.watch(config.publicPath + "/styles/**").on("change", function(file) {
        lrServer.changed({ body: { files: [file.path] } });
    });
});
gulp.task("dev", ["dev.styles", "dev.scripts"]);
gulp.task("prod", ["prod.styles", "prod.scripts"]);

一切都如预期的那样工作，但是，使用监视任务时的构建时间需要几秒钟。奇怪的是，我的任务报告说，脚本的重新编译发生在500毫秒以下（"时间"事件的事件处理程序），但如果我在脑子里数，它要到三四秒后才能完成。

请注意，在粘贴现有的TypeScript代码之前，我正在快速加载/绑定jQuery、React、Moment和其他正在使用的库。正因为如此，我不认为使用单独的供应商捆绑包会加快任何速度。此外，不写出源映射似乎也不会影响性能。

在我切换到browserfy之前，我使用gulp-typescript进行编译，使用requirejs进行模块加载。这些构建只花了不到一秒钟的时间。然而，requirejs由于其他原因导致了问题——不管怎样，我都想从AMD转移到CommonJS。

目前，这不是一个巨大的问题，但随着项目的发展，它肯定会导致我的开发流程出现问题。对于一个只有这么大的项目，处理更大的项目需要多长时间？

此外，它还导致Visual Studio出现问题。这是一个ASP.NET 5应用程序，Visual Studio显然坚持在绑定的JavaScript文件每次更改时都要重新加载/解析该文件，导致每次更改后IDE延迟1-2秒：再加上重新编译本身需要3-4秒。脚本正在呈现到我的wwwroot文件夹中，并且似乎无法使用ASP.NET 5工具"排除"脚本子文件夹。

我知道我在某个地方错过了什么。一个可能的问题是tsify没有使用typescript的"项目"功能来实现重新加载，导致typescript编译器每次更改都要重新处理每个文件。

无论如何，我不可能是唯一一个在玩具项目之外使用过这些工具的人，所以我在这里问是否有人有更好的解决方案；除了这个问题，一切都很顺利。

编辑-------------------------------

好吧，我得收回我自己的话。由于我正在将我的第三方库捆绑到它们自己的捆绑包中，构建时间减少到大约一秒钟。这是我更新的gulpfile（注意新的dev.scripts.vendor任务和buildScripts函数中的.external调用）

var gulp = require("gulp"),
    $ = require("gulp-load-plugins")(),
    _ = require("lodash"),
    tsify = require("tsify"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream"),
    debowerify = require("debowerify"),
    watchify = require("watchify"),
    lr = require("tiny-lr"),
    buffer = require("vinyl-buffer");
var lrServer = lr();
var config = {
    scripts: {
        base: __dirname + "/Resources/Scripts",
        main: "Application.ts",
        output: "App.js",
        vendor: ["react", "jquery", "moment", "socket.io-client", "lodash", "react-dom"]
    },
    styles: {
        base: __dirname + "/Resources/Styles",
        sheets: ["Application.less", "Preload.less"],
        autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
    },
    publicPath: __dirname + "/wwwroot"
};
function printError(err) {
    $.util.log($.util.colors.red.bold(err.type + " " + err.name + ":"), $.util.colors.white(err.message));
    this.emit("end");
}
function buildScripts(watch, debug) {
    var bundler = browserify({
            basedir: config.scripts.base,
            debug: false,
            entries: [config.scripts.base + "/" + config.scripts.main],
            cache: {},
            packageCache: {}
        })
        .plugin(tsify, {
            module: "commonjs",
            target: "es5",
            jsx: "react"
        });
    if (debug)
        bundler.external(config.scripts.vendor);
    function build() {
        return bundler.bundle()
            .on("error", printError)
            .pipe(source(config.scripts.output))
            .pipe($.if(!debug, buffer()))
            .pipe($.if(!debug, $.uglify()))
            .pipe(gulp.dest(config.publicPath + "/" + "scripts"));
    }
    if (!watch)
        return build();
    bundler
        .plugin(watchify)
        .on("update", function () {
            $.util.log($.util.colors.grey("Building scripts..."));
            build();
        })
        .on("time", function (timeMs) {
            $.util.log(
                $.util.colors.grey("Finished"),
                $.util.colors.cyan("'dev.scripts.watch' after"),
                $.util.colors.magenta(timeMs.toLocaleString() + " ms"));
        });
    return build();
}
gulp.task("prod.scripts", function() {
    return buildScripts(false, false);
});
gulp.task("dev.scripts", ["dev.scripts.vendor"], function () {
    return buildScripts(false, true);
});
gulp.task("dev.scripts.vendor", function() {
    return browserify({
            debug: true,
            cache: {},
            packageCache: {},
            require: config.scripts.vendor
        })
        .bundle()
        .on("error", printError)
        .pipe(source("Vendor.js"))
        .pipe(gulp.dest(config.publicPath + "/" + "scripts"));
});
gulp.task("dev.scripts.watch", ["dev.scripts.vendor"], function () {
    return buildScripts(true, true);
});
gulp.task("prod.styles", function () {
    return gulp
        .src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
        .pipe($.less())
        .on("error", printError)
        .pipe($.autoprefixer(config.styles.autoprefixer))
        .pipe($.uglifycss())
        .pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles", function () {
    return gulp
        .src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
        .pipe($.sourcemaps.init())
        .pipe($.less())
        .on("error", printError)
        .pipe($.autoprefixer(config.styles.autoprefixer))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles.watch", ["dev.styles"], function () {
    return gulp.watch(config.styles.base + "/**/*.{css,less}", ["dev.styles"]);
});
gulp.task("dev.watch", ["dev.scripts.watch", "dev.styles.watch"], function () {
    lrServer.listen(35729);
    gulp.watch(config.publicPath + "/styles/**").on("change", function(file) {
        lrServer.changed({ body: { files: [file.path] } });
    });
});
gulp.task("dev", ["dev.styles", "dev.scripts"]);
gulp.task("prod", ["prod.styles", "prod.scripts"]);

然而，我还是遇到了一个奇怪的问题。在禁用源映射的情况下（现在似乎对速度有影响），我的on（"time"，（）=>｛｝）回调报告每次文件更改60-80ms，但它仍然会挂起大约一秒钟。第二个是我愿意等待的全部，所以我再次担心，随着项目的发展，这种等待可能也会增加。

当事件报告的内容要小得多时，看看这额外的一秒时间花在了什么上会很有趣。也许我会开始深入了解消息来源，因为似乎没有人能马上找到答案。

另一个问题这只是一个附带说明，但debowerify不再适用于此。当使用debowerify+bower时，它将继续在最终输出中呈现所需的模块，即使该模块列在"外部"列表中。因此，目前有了这个设置，我只能使用npm模块，除非我可以在我的应用程序包中添加更多的编译时间。

此外，我了解到debowerify将覆盖npm模块，它基于bower_contensions的目录列表，而不是您的bower-config文件。我在npm中安装了jQuery，在bower中只安装了bootstrap；但由于bootstrap将jQuery作为依赖项删除，因此bower-jQuery模块的加载优先于NPMjQuery。只是提醒人们。

Answer 1

忘记这一点，只需使用最新的TS+webpack:）