Javascript 吞咽browserify reactify任务相当慢

我使用Gulp作为我的任务运行程序，并使用browserify捆绑我的CommonJs模块

我注意到运行我的browserify任务非常慢，大约需要2-3秒，我所拥有的只是反应和一些为开发而构建的非常小的组件

有没有办法加快任务的速度，或者我的任务中有没有明显的问题

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');

谢谢

请参阅。请注意，传递给browserify的唯一内容是主入口点和watchify的配置

这些转换被添加到watchify包装器中

文章中的代码一字不差地粘贴

---

您必须使用watchify并启用其缓存。看看： 为了在构建源地图时获得更多优化，您可以这样做：

cd节点模块/浏览器系列化和npm i子堆栈/浏览器包#sm fast 这会让你有一半的时间安全

我的gulpfile.js的一部分

var gulp=require（'gulp'）；
var-uglify=需要（'gulp-uglify'）；
var htmlreplace=require（'gulp-html-replace'）；
var源=要求（‘乙烯基源流’）；
var browserify=需要（'browserify'）；
var watchify=require（'watchify'）；
var reactify=require（'reactify'）；
var streamify=require（'gulp-streamify'）；
变量路径={
OUT:'build.js'，
DEST2:“/home/apache/www modules/adminimail/se/se”，
目标构建：“构建”，
DEST_DEV:'DEV'，
入口点：'./src/js/main.jsx'
};
gulp.task（'watch'，[]，function（））{
var bundler=browserify({
条目：[path.ENTRY\u POINT]，
扩展名：[“.js”、“.jsx”]，
转换：['reactify']，
是的，
完整路径：正确，
cache:{}，//非常感谢@PHaroZ的回答。不过，我不得不根据自己的需要修改一点代码。我正在Symfony2框架上使用ReactJS，我所有的构建都需要7s-21s！！！疯狂..所以我现在拥有了：

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

var路径={
OUT:'app.js'，
DEST_BUILD:“./src/MyBundle/Resources/js/dist”，
入口点：'./src/MyBundle/Resources/js/src/app.js'
};
gulp.task（'watch'，[]，function（））{
var bundler=browserify({
条目：[path.ENTRY\u POINT]，
扩展名：[“.js”、“.jsx”]，
//转换：['reactify']，
是的，
完整路径：正确，
缓存：{}，//谢谢你的帮助，我使用的是watchify，但在我的示例中，你的构建也需要2-3秒吗？我没有在任何我正在积极开发的项目上使用watchify，所以我没有参考点，对不起。我在我的项目中使用watchify。第一个构建是最长的一个。它需要大约2秒。下一个构建需要大约300秒ms@steveniseki我有完全相同的问题。我使用相同的堆栈（browserify，watchify），在我的情况下，任务需要更长的时间~7秒。你解决了这个问题吗？
cache:{}和packageCache:{}
就是为我做的！
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();
});