gulp browserify reactify 任务很慢

2022-01-12 00:00:00 reactjs javascript gulp browserify watchify

我使用 Gulp 作为我的任务运行器和 browserify 来捆绑我的 CommonJs 模块.

I am using Gulp as my task runner and browserify to bundle my CommonJs modules.

我注意到运行我的 browserify 任务非常慢，大约需要 2 到 3 秒，而且我只有 React 和一些我为开发而构建的非常小的组件.

I have noticed that running my browserify task is quite slow, it takes around 2 - 3 seconds, and all I have is React and a few very small components I have built for development.

有没有办法加快任务，或者我的任务中有什么明显的问题?

Is there a way to speed up the task, or do I have any noticeable problems in my task?

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 和 Vinyl Source Stream 以及其他一些不相关的模块.

I am using Browserify, Watchify, Reactify and Vinyl Source Stream as well as a few other unrelated modules.

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

谢谢

推荐答案

参见 使用 watchify 快速构建浏览器.请注意，传递给 browserify 的唯一内容是主入口点和 watchify 的配置.

See fast browserify builds with watchify. Note that the only thing passed to browserify is the main entry point, and watchify's config.

转换被添加到 watchify 包装器中.

The transforms are added to the watchify wrapper.

逐字粘贴的文章代码

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

相关文章