gulp browserify reactify task довольно медленный

Question

Я использую Gulp в качестве моего бегуна задач и просматриваю его, чтобы расслоить мои модули CommonJs.

Я заметил, что выполнение моей задачи по браузеру происходит довольно медленно, это занимает около 2 - 3 секунд, и все, что у меня есть, это React и несколько очень маленьких компонентов, которые я создал для разработки.

Есть ли способ ускорить выполнение задачи или у меня есть какие-то заметные проблемы в моей задаче?

gulp.task('browserify', function() { 
    var bundler = browserify({ 
    entries: ['./main.js'], // Only need initial file 
    transform: [reactify], // Convert JSX to javascript 
    debug: true, cache: {}, packageCache: {}, fullPaths: true 
    }); 

    var watcher = watchify(bundler); 

    return watcher 
    .on('update', function() { // On update When any files updates 
    var updateStart = Date.now(); 
     watcher.bundle() 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest('./')); 
     console.log('Updated ', (Date.now() - updateStart) + 'ms'); 
    }) 
    .bundle() // Create initial bundle when starting the task 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./')); 
}); 

Я использую Browserify, Watchify, Reactify и виниловый источник потока, а также несколько других, не связанных модулей.

var browserify = require('browserify'), 
watchify = require('watchify'), 
reactify = require('reactify'), 
source = require('vinyl-source-stream'); 

Благодаря

Answer 1

См fast browserify builds with watchify. Обратите внимание, что единственная вещь, переданная для браузера, является основной точкой входа и конфигурацией watchify.

Преобразования добавляются в оболочку watchify.

_{код из статьи вставил дословный}

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var sourcemaps = require('gulp-sourcemaps'); 
var source = require('vinyl-source-stream'); 
var buffer = require('vinyl-buffer'); 
var watchify = require('watchify'); 
var browserify = require('browserify'); 

var bundler = watchify(browserify('./src/index.js', watchify.args)); 
// add any other browserify options or transforms here 
bundler.transform('brfs'); 

gulp.task('js', bundle); // so you can run `gulp js` to build the file 
bundler.on('update', bundle); // on any dep update, runs the bundler 

function bundle() { 
    return bundler.bundle() 
    // log errors if they happen 
    .on('error', gutil.log.bind(gutil, 'Browserify Error')) 
    .pipe(source('bundle.js')) 
    // optional, remove if you dont want sourcemaps 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file 
     .pipe(sourcemaps.write('./')) // writes .map file 
    // 
    .pipe(gulp.dest('./dist')); 
} 

Answer 2

Вы должны использовать watchify и включить его кэш. Посмотрите на: https://www.codementor.io/reactjs/tutorial/react-js-browserify-workflow-part-2 и для более оптимизации при создании источника карты вы могли бы сделать это:

кд node_modules/browserify & & НПМ я substack/браузерная пакет # см-быстро это безопасно бы вы половина времени

часть моего gulpfile.js

var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 
var htmlreplace = require('gulp-html-replace'); 
var source = require('vinyl-source-stream'); 
var browserify = require('browserify'); 
var watchify = require('watchify'); 
var reactify = require('reactify'); 
var streamify = require('gulp-streamify'); 

var path = { 
    OUT : 'build.js', 
    DEST2 : '/home/apache/www-modules/admimail/se/se', 
    DEST_BUILD : 'build', 
    DEST_DEV : 'dev', 
    ENTRY_POINT : './src/js/main.jsx' 
}; 

gulp.task('watch', [], function() { 
    var bundler = browserify({ 
     entries : [ path.ENTRY_POINT ], 
     extensions : [ ".js", ".jsx" ], 
     transform : [ 'reactify' ], 
     debug : true, 
     fullPaths : true, 
     cache : {}, // <---- here is important things for optimization 
     packageCache : {} // <---- and here 
    }); 
    bundler.plugin(watchify, { 
//  delay: 100, 
//  ignoreWatch: ['**/node_modules/**'], 
//  poll: false 
    }); 

    var rebundle = function() { 
     var startDate = new Date(); 
     console.log('Update start at ' + startDate.toLocaleString()); 
     return bundler.bundle(function(err, buf){ 
       if (err){ 
        console.log(err.toString()); 
       } else { 
        console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms'); 
       } 
      }) 
      .pipe(source(path.OUT)) 
      .pipe(gulp.dest(path.DEST2 + '/' + path.DEST_DEV)) 
      ; 
    }; 

    bundler.on('update', rebundle); 
    return rebundle(); 
}); 

gulp.task('default', [ 'watch' ]); 

Answer 3

Большое спасибо @PHaroZ за этот ответ. Мне пришлось немного изменить этот код для моих потребностей. Я работаю с ReactJS на платформе Symfony2, и все мои сборки занимали 7 с-21! Сумасшедший .. Так вот что я сейчас:

var path = { 
    OUT : 'app.js', 
    DEST_BUILD : './src/MyBundle/Resources/js/dist', 
    ENTRY_POINT : './src/MyBundle/Resources/js/src/app.js' 
}; 

gulp.task('watch', [], function() { 
    var bundler = browserify({ 
     entries : [ path.ENTRY_POINT ], 
     extensions : [ ".js", ".jsx" ], 
//  transform : [ 'reactify' ], 
     debug : true, 
     fullPaths : true, 
     cache : {}, // <---- here is important things for optimization 
     packageCache : {} // <---- and here 
    }).transform("babelify", {presets: ["es2015", "react"]}); 
    bundler.plugin(watchify, { 
//  delay: 100, 
//  ignoreWatch: ['**/node_modules/**'], 
//  poll: false 
    }); 

    var rebundle = function() { 
     var startDate = new Date(); 
     console.log('Update start at ' + startDate.toLocaleString()); 
     return bundler.bundle(function(err, buf){ 
       if (err){ 
        console.log(err.toString()); 
       } else { 
        console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms'); 
       } 
      }) 
      .pipe(source(path.OUT)) 
      .pipe(gulp.dest(path.DEST_BUILD)) 
      ; 
    }; 

    bundler.on('update', rebundle); 
    return rebundle(); 
}); 

Теперь первая компиляция занимает около 20-х, и каждый раз, когда я обновляю свой файл, он занимает около 800 мс. Достаточно времени для перехода с IDE на мой браузер.