浏览器性能令人惊喜

Question

我正在将构建过程从连接脚本列表迁移到Browserify。

旧版

• Bower所有供应商脚本
• build：连接所有脚本并缩小（uglifyjs）结果

新版本

• 尽可能使用npm modules
• 如果不可用，请从Bower获取并使用debowerify
• 构建：browserify（和+ watchify）捆绑，然后缩小（uglifyjs）结果

让我感到惊讶的是：

• watchify的重新加载时间约为3秒，是不是很多？
• 最终脚本比以前的版本大3倍，而模块是相同的。 错误：不正确，请参阅下文

你认为我的构建有问题吗？

修改

脚本大小没有增加。我没有正确测量它，因为我看到的旧版本是gzip大小。我将它留在这里，这样一来，如果他们以类似的方式被愚弄，人们就会更快地解决它。

捆绑时间的问题仍然存在。

我正在使用Gulp，这是我gulpfile.js的相关部分：

var gulp = require('gulp');
var gutil = require('gulp-util');

var browserify = require('browserify'); // bundles CommonJS modules (require('...')) into a file for the browser.
var watchify = require('watchify'); // fast watch for browserify
var sourcemaps = require('gulp-sourcemaps'); // for creating sourcemaps
var uglify = require('gulp-uglify'); // for JS minification
var jade = require('gulp-jade'); // for Jade compilation


function scriptsBundle(watchified){
  var b = browserify({
    entries: ['./src/frontend/app.js'],
    debug: true,
    transforms: [
      //bNgAnnotate
    ]
  });
  if(watchified){
    b = watchify(b);
  }
  b.transform('debowerify');
  return b;
}

function buildScripts(bundleable){
  return bundleable.bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    //.pipe(sourcemaps.init({loadMaps: true}))
    //.pipe(uglify())
    .on('error', gutil.log)
    //.pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(FRONTEND_PUBLIC_DIR));
}

gulp.task('scripts-watchified', function () { // reloadable bundling, , that's what takes 3s for every reload
  var bundleable = scriptsBundle(true);
  var build = _.partial(buildScripts, bundleable);
  bundleable.on('update', function (e) {
    console.log("Bundle update", e);
    return build();
  });
  bundleable.on('log', gutil.log);
  //bundleable.on('update', browserSync.reload);

  return build();
});