Browserify shim with jquery results in large entry javascript. Why?

I have a minimal index.js which is essentially empty.

when I use const $ = require('jquery') my index.js balloons in size.

Without using const $ = require('jquery') my index.js is 13kb.

With const $ = require('jquery') my index.js 900+ kb

That makes no sense to me because the jquery library I am using is 250kb.

Why does my index.js balloon in size due to browserify / browserify-shim?

Here is my package.json:

"browser":{
    "jquery":"./libs/jquery-2.1.4.js"
},
"browserify-shim":{
    "jquery":"$"
},

Note I am also using the transform babelify in my gulp because I am using ES6.

My gulp task has the following:

browserify({ entries: entry, debug: generateSourcemaps})
                .transform('babelify', {
                    sourceMaps: generateSourcemaps,
                    presets: ['babel-preset-es2015'],
                    compact: false
                })
                .transform('browserify-shim')

Your sourcemaps are the issue. I just created a simple repo at https://github.com/YPCrumble/balloon-SO. Look in the dist directory and you'll see that without sourcemaps your file would be ~280k, but with sourcemaps it's ~760k. Sourcemaps only add the extra size when you're combining a library like jQuery into your code.

Changing your gulpfile to:

browserify({ entries: entry})
            .transform('babelify', {
                presets: ['babel-preset-es2015'],
                compact: false
            })
            .transform('browserify-shim')

...would reduce the bundle size tremendously.