Почему Gulp так долго компилирует и пакует код из jsx > js?

Question

[Itvanya]

Друзья, всем привет. Пишу код на реакте, в качестве системы сборки использую gulp#4.0. Для сборки require js использую обычный browserify в связке с gulp. Сборка кода js получается в ~30 сек, а вотчер обновляется только через 7-8 секунд после сохранения файла. Ниже выкладываю код таска, который бандлит весь код JS. Данный код забирает все React компоненты из app.js, оборачивает в обертку от browserify для использование require js в браузере, транспайлит в ES5 и минифицирует. Таким образом и весь клиентский код и библиотека реакт оказываются в одном файле bundle.js, который мы подключаем позже. Весь процесс занимает до ~30 секунд, а вотчер обновляет в пределе тех же 7-8 сек. На сколько данная ситуация нормальна, или что-то я делаю не так, что делает такие задержки во времени? Как можно ускорить сборку с реактом? Заранее благодарен.

gulp.task('scripts', function() {
	return browserify('dev/js/app.js')
		.transform("babelify", {presets: ["es2015", "react"]})
		.bundle()
		.pipe(source('bundle.js'))
		.pipe(buffer())
		.pipe(uglify({
			mangle : true,
			compress : true
		}))
		.pipe(gulp.dest('public/js'));
});
gulp.watch('dev/js/*.js', gulp.series('js'));

Answer 1

[Сергей delphinpro]

А зачем библиотеку в общий бандл? Я вендоров отдельным таском собираю, в отдельный файл, т.к. они редко добавляются/удаляются. А свой код уже отдельно, и компилится он мгновенно.

Comments

[Сергей delphinpro]

var config = require('../config');
if (!config.jsx) return;

var gulp       = require('gulp');
var browserify = require('browserify');
var babelify   = require('babelify');
var source     = require('vinyl-source-stream');
var uglify     = require('gulp-uglify');
var streamify  = require('gulp-streamify');

var browserSync  = require('browser-sync');
var handleErrors = require('../lib/handleErrors');
var path         = require('path');

var devBuild = true;

var bundler = function (bundles, _sourceDir, _destinationDir) {
    var makeBundle = function (bundle) {
        var b = {};

        b.name     = bundle.name;
        b.deps     = bundle.deps;
        b.src      = path.join(_sourceDir, bundle.name + config.jsx.ext);
        b.destDir  = _destinationDir;
        b.destFile = bundle.name + '.js';

        return b;
    };

    var pack = [];
    for (var i = 0; i < bundles.length; i++) {
        pack.push(makeBundle(bundles[i]));
    }

    return pack;
};

var bundles = bundler(
    config.jsx.bundles,
    path.join(config.root.src, config.jsx.src), // source/jsx
    path.join(config.root.build, config.jsx.build) // public/js
);

var jsxTask = function (cb) {
    console.log('Run task: jsx');
    var queue = bundles.length;

    var handleQueue = function () {
        if (queue) {
            queue--;
            if (queue === 0) {
                console.log('Compiled all files. Reload.');
                browserSync.reload();
                cb();
            }
        }
    };

    var buildThis = function (bundle) {
        var browserifyInstance = browserify({
            cache       : {},
            debug       : devBuild,
            entries     : bundle.src,
            extensions  : ['.jsx'],
            fullPaths   : devBuild,
            packageCache: {}
        });

        var reBuild = function () {
            console.log('rebuild:', bundle.src);
            //noinspection JSUnresolvedFunction
            browserifyInstance.transform('babelify', {presets: ['es2015', 'react']});

            bundle.deps.forEach(function (dep) {
                //noinspection JSUnresolvedFunction
                browserifyInstance.external(dep);
            });

            //noinspection JSUnresolvedFunction
            return browserifyInstance
                .bundle()
                .on('error', handleErrors)
                .pipe(source(bundle.destFile))
                .pipe(gulp.dest(bundle.destDir))
                .on('end', handleQueue);
        };

        return reBuild();
    };

    bundles.forEach(buildThis);
};

gulp.task('jsx-vendors', function () {
    var vendorsInstance = browserify({
        debug  : false,
        require: config.jsx.commonDeps
    });
    //noinspection JSUnresolvedFunction
    vendorsInstance.bundle()
        .on('error', handleErrors)
        .pipe(source('vendors.js'))
//        .pipe(streamify(uglify()))
        .pipe(gulp.dest(path.join(config.root.build, config.jsx.build)))
        .on('end', function () {
            console.log('Built vendors.js');
        });
});

gulp.task('jsx', jsxTask);

var _localDomain = 'super.project';
var _browsers    = [];
var _src         = 'source/';
var _build       = 'public_html/';

module.exports = {

    root: {
        src  : _src,
        build: _build
    },

    watchableTasks: ['jsx', 'css', 'images', 'fonts'],

    defaultTasks: ['jsx', 'jsx-vendors', 'css', 'images', 'fonts'],

    jsx: {
        src       : 'jsx',
        build     : 'js',
        extensions: ['jsx', 'js'],
        ext       : '.jsx',
        commonDeps: ["react", "react-dom", 'highcharts', 'page'],
        bundles   : [{
            name: "app",
            deps: ["react", "react-dom", 'highcharts', 'page']
        }]
    },

    // .... cut

    // http://www.browsersync.io/docs/options/
    browserSync: {
        browser  : _browsers,
        notify   : false,
        startPath: '/',
        proxy    : _localDomain
    }
};

[Itvanya]

Сергей: спасибо, Сергей :) действительно, лучше собирать отдельно друг от друга

[vaskadogana]

Itvanya: а jsx-vendors это что?