2

I'm using browserify and factor-bundle to manage dependencies, and in theory it should work great. We have different endpoints across pages, and running factor-bundle splits really quickly and efficiently for caching.

The problem is that I'm running into this issue: https://github.com/substack/factor-bundle/issues/13

Unless there's a workaround, this appears to make factor-bundle completely useless until the issue is fixed. Is there a way to split off common dependencies manually in the interim? Or even a way to use factor-bundle at a reduced capacity?

EDIT

This is my current gulp build script:

var browserify = require('browserify');
var bromote = require('bromote');
var PassThrough = require('stream').PassThrough;

var gulp = require('gulp');
var streamify = require('gulp-streamify');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');

gulp.task('browserify', function () {

    var remote = {
        google_maps: {
            exports: 'google_maps',
            url    : '//maps.google.com/maps/api/js?v=3.12&sensor=false&key=xxx&libraries=places&callback=?'
        }
    };

    var sources = {
        entries: [
            './a.js',
            './b.js',
            './c.js'
        ],
        bundles: [
            './build/a.js',
            './build/b.js',
            './build/c.js'
        ]
    };

    bromote(null, remote, function (err) {
        if (err) {
            return console.error(err);
        }
        for (var i = 0; i < sources.entries.length; i++) {
            var passThrough = new PassThrough();

            browserify({
                debug: true,
                entries : sources.entries[i],
                basedir : './js/'
            })
                .bundle()
                .pipe(passThrough)
                .on('error', handleErrors)
                .pipe(source(sources.bundles[i]))
                .pipe(gulp.dest('./'));
        }
        return true;
    });
});

This is the version with factor-bundle:

var browserify = require('browserify');
var bromote = require('bromote');
var PassThrough = require('stream').PassThrough;

var gulp = require('gulp');
var streamify = require('gulp-streamify');
var factor = require('factor-bundle');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');

gulp.task('browserify', function () {

    var remote = {
        google_maps: {
            exports: 'google_maps',
            url    : '//maps.google.com/maps/api/js?v=3.12&sensor=false&key=xxx&libraries=places&callback=?'
        }
    };

    var sources = {
        entries: [
            './a.js',
            './b.js',
            './c.js'
        ],
        bundles: [
            './build/a.js',
            './build/b.js',
            './build/c.js'
        ]
    };

    bromote(null, remote, function (err) {
        if (err) {
            return console.error(err);
        }       var passThrough = new PassThrough();
        return browserify({
            entries: sources.entries,
            basedir: './js/',
            fullPaths : false
        })
        .plugin(factor, {
            o: sources.bundles
        })
        .bundle({
            debug: true
        })
        .pipe(passThrough)
        .on('error', handleErrors)
        .pipe(source('common.js'))
        .pipe(gulp.dest('./build/'));
    });
});
sixtimes
  • 337
  • 2
  • 11

0 Answers0