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

Question

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

9 browserify typescript gulp watchify tsify

我有一个"中等"的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"]);

Run Code Online (Sandbox Code Playgroud)

一切都按预期工作,但是,使用监视任务的构建时间需要很多秒.奇怪的是,我的任务报告说脚本的重新编译发生在500ms以下("时间"事件的事件处理程序),但是如果我算在脑子里它直到三到四秒才完成.

请注意,在我粘贴现有的TypeScript代码之前,我正在加载/捆绑jQuery,React,Moment以及我正在使用的其他库.因此,我不认为使用单独的供应商捆绑可以加速任何事情.此外,不写出源图也不会影响性能.

在我切换到browserify之前,我使用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"]);

Run Code Online (Sandbox Code Playgroud)

但是,我仍然遇到一个奇怪的问题.禁用源映射(现在看起来对速度有影响),我的on("time",()=> {})回调报告每个文件更改60-80ms,但它仍然会挂起大约一秒钟.第二个是关于我愿意等待的所有内容,所以我再次担心随着项目的发展,这种等待也会增长.

当事件报告的事情要小得多时,看看这个额外的第二个时间花在了什么上会很有趣.也许我会开始挖掘一下源,因为似乎没有人能够立即获得答案.

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

另外,我了解到debowerify将覆盖npm模块,并且它基于bower_components的目录列表,而不是你的bower配置文件.我在npm中安装了jQuery,只在bower中引导; 但是由于bootstrap将jQuery作为依赖项下拉,因此bower jQuery模块优先于NPM jQuery加载.只是一个人的头.

Answer 1

小智 2

忘记这个，只需使用最新的 TS + webpack :)

归档时间：	10 年前
查看次数：	1969 次
最近记录：	9 年，1 月前