問題描述

我使用 Gulp 作為我的任務運行器和 browserify 來捆綁我的 CommonJs 模塊.

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

我注意到運行我的 browserify 任務非常慢，大約需要 2 到 3 秒，而且我只有 React 和一些我為開發(fā)而構(gòu)建的非常小的組件.

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 以及其他一些不相關(guān)的模塊.

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 快速構(gòu)建瀏覽器.請注意，傳遞給 browserify 的唯一內(nèi)容是主入口點和 watchify 的配置.

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

轉(zhuǎn)換被添加到 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'));
}

這篇關(guān)于gulp browserify reactify 任務很慢的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！