如何在Gulp中提升Browserify的打包速度

使用Browserify打包js時若是項目變得愈來愈大，編譯時間就會相應變得愈來愈長。使用官方的插件watchify是個比較有效的提升速度方案。

提速原理

watchify的用法和gulp的watch方法比較相似，都是監控文件的改動來觸發一些操做。在gulp中咱們能夠把一個完整的任務拆分紅不少個局部任務，而後使用gulp.watch對這些局部任務進行監聽，例如：

gulp.task('build-js1', ...);
gulp.task('build-js2', ...);
gulp.task('build-all-js', ['build-js1', 'build-js2']);

gulp.task('watch-js1', function () {
  gulp.watch('./src/models/**/*.js', ['build-js1']);
});

gulp.task('watch-js2', function () {
  gulp.watch('./src/views/**/*.js', ['build-js2']);
});

//gulp.task('watch-js', function () {
//  gulp.watch('./src/**/*.js', ['build-all-js']);
//});

如上例所示，在監測不一樣局部位置的js文件發生改動後，則只會自動執行相應的build-js1或build-js2等局部任務；而若是直接監測全部的js文件，就必須每次執行build-all-js任務了。

watchify的提速原理和這個思路有點相似，它能夠監測個別文件的改動，從而觸發只將須要更新的文件打包。它需要先執行一次完整的打包，首次打包的速度和正常速度是同樣的；而後每次用戶改變某個和browserify關聯的js文件時，會自動執行打包，而此次打包的速度卻很是快。

具體實例

watchify結合gulp的實例以下：

var gulp = require('gulp'),
  browserify = require('browserify'),
  source = require('vinyl-source-stream'),
  buffer = require('vinyl-buffer'),
  watchify = require('watchify'),
  concat = require('gulp-concat'),
  gulpif = require('gulp-if'),
  argv = require('yargs').argv,
  ...;

function getJsLibName() {
  ...
}

//初始化browserify
var b = browserify({
  entries: './src/base.js'
})
.plugin(...)
.transform(...);

//執行打包js
function bundle() {
  var jsLibName = getJsLibName();

  return b.bundle()
    .pipe(source(jsLibName))
    .pipe(buffer())
    .pipe(gulp.dest('./dist/js').on('end', function() {  //打包js後繼續進行一些後續操做
      gulp.src(['./vendor/babelHelpers.js', './dist/js/' + jsLibName])
      .pipe(concat(jsLibName))
      .pipe(gulpif(argv.min, uglify()))
      .pipe(gulp.dest('./dist/js'))
    }));
}

//定義打包js任務
gulp.task('build-all-js', bundle);

//啓動watchify監測文件改動
gulp.task('watch-js', function() {
  b.plugin(watchify);  //設置watchify插件
  b.on('update', function(ids) {  //監測文件改動
    ids.forEach(function(v) {
      console.log('bundle changed file:' + v);  //記錄改動的文件名
    });

    gulp.start('build-all-js');  //觸發打包js任務
  });

  return bundle();  //需要先執行一次bundle
});

• 例中能夠在gulpfile.js中將browserify的實例定義在全局，這樣在browserify實例的update事件中就能夠正常調用到bundle方法了。

• 定義一般的打包js任務build-all-js，例如須要整個項目打包執行它便可。

• 單獨定義監測文件改動的任務watch-js，使用gulp啓動這個任務後，就能夠啓動watchify的文件改動監測功能了。須要爲browserify實例註冊update事件，在該事件中觸發build-all-js任務便可。另外在這個任務中需要先執行一次browserify實例的bundle方法，但此次打包的速度和直接執行build-all-js是同樣的。

關於watchify的更多細節你們能夠參考官方文檔及這篇文章：Fast browserify builds with watchify

測試打包速度

首先在啓動watch-js任務時，會執行首次打包：

本次打包共花費了6.2秒。

而後在用戶改動某個browserify關聯的js文件時，都會自動觸發build-all-js任務：

能夠看出，此次打包只花費了203毫秒，速度提升了不少。

更多細節你們可參考實例的源代碼。