Browserify, is it possible to bundle common modules into seperate file?

Question

I'm using Browserify + Babel + Gulp in my web app. When I bundle the script, I just bundle all into single file. When I was checked the file size, it had over 3MB, and I thought it is too much.

I don't know how Babel and Browserify change my source, but if possible, I want to separate common modules(like installed via NPM), so make browser load files separately, if it is good approach.

Is it good approach that separate single JS file to multiple small scripts? Also is there a way to do that with Browserify + Babel + Gulp?

This is my gulp task when I using bundling my script:

gulp.task('script', () => {
    return browserify({
        entries: [`${SRC_PATH}/js/app.js`],
        paths: ['./node_modules', './src/js']
    })
    .transform(babelify, { 
        presets: ["es2015", "react", "stage-0"],
        plugins: [
            "transform-runtime",
            "transform-decorators-legacy",
            "transform-async-to-generator"
        ]
    })
    .transform(browserifyCss, { global: true })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`${BUILD_PATH}/js`));
});

Answer 1

I solved this by creating another task to build only common modules seperately.