gulprewrify Rejestruj zadanie jest dość powolne

Question

Używam Gulp jako mojego biegacza zadań i przeglądam, aby połączyć moje moduły CommonJs.

Zauważyłem, że uruchamianie mojego zadania przeglądarki jest dość powolne, zajmuje około 2 - 3 sekundy, a wszystko, co mam, to React i kilka bardzo małych komponentów, które zbudowałem dla rozwoju.

Czy istnieje sposób na przyspieszenie zadania lub czy mam jakieś zauważalne problemy w moim zadaniu?

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('./')); 
}); 

Używam Browserify, Watchify, Reactify i Vinyl Source Stream, a także kilka innych niepowiązanych modułów.

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

Dzięki

Answer 1

Zobacz fast browserify builds with watchify. Zauważ, że jedyną rzeczą przekazaną do przeglądania jest główny punkt wejścia i konfiguracja watchify.

Transformacje są dodawane do wrappera watchify.

_{kod z artykułu wklejony verbatim}

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

Musisz użyć watchify i umożliwić jej pamięć podręczną. Spójrz na: https://www.codementor.io/reactjs/tutorial/react-js-browserify-workflow-part-2 i więcej optymalizacji przy budowie źródło-map można zrobić:

cd node_modules/browserify & & npm i substack/browser-Pack # sm szybki to będzie bezpieczne ty połowa czasu

część moich 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

Wielkie dzięki dla @PHaroZ za tę odpowiedź. Musiałem jednak trochę zmodyfikować ten kod dla moich potrzeb. Pracuję z ReactJS na platformie Symfony2 i wszystkie moje kompilacje biorą 7s-21s !!! Szalony .. Więc to, co mam teraz:

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(); 
}); 

Teraz pierwszy kompilacji trwa około 20s i za każdym razem mogę zaktualizować plik zajmuje około 800ms. To wystarczy czasu, aby przejść z IDE do mojej przeglądarki.