Interesting stuff learned about browserify and lodash while leaning up json-refs.

json-refs-leaning-up.md

I was recently building a release of json-refs when I realized that the on disk file size was much larger than I expected. I use browserify to build my browser builds since I write json-refs for io.js/node.js. I started looking into the browserify build graph and that is when I noticed something interesting. Below are my findings.

Note: I realize I might be fixing a problem that does not matter and there could even be flaws in how json-refs is using browserify. I also realize that removing lodash is not something you can always do. This is just one of those cases where I wasn't using anything in lodash that wasn't in ES5 and I didn't need json-refs to work in pre-ES5 environments. This is not a hit on lodash, lodash is awesome. Please leave any feedback in the comments.

json-refs@4db31ed

At this point, the dependencies for json-refs are: traverse, native-promise-only and lodash-compat. I was cherrypicking my lodash-compat features to ensure that only what I needed was bundled in my browser binaries.

Cherrypicked lodash-compat functions (16)

var _ = {
  cloneDeep: require('lodash-compat/lang/cloneDeep'),
  each: require('lodash-compat/collection/each'),
  indexOf: require('lodash-compat/array/indexOf'),
  isArray: require('lodash-compat/lang/isArray'),
  isError: require('lodash-compat/lang/isError'),
  isFunction: require('lodash-compat/lang/isFunction'),
  isNumber: require('lodash-compat/lang/isNumber'),
  isPlainObject: require('lodash-compat/lang/isPlainObject'),
  isString: require('lodash-compat/lang/isString'),
  isUndefined: require('lodash-compat/lang/isUndefined'),
  keys: require('lodash-compat/object/keys'),
  lastIndexOf: require('lodash-compat/array/lastIndexOf'),
  map: require('lodash-compat/collection/map'),
  reduce: require('lodash-compat/collection/reduce'),
  size: require('lodash-compat/collection/size'),
  times: require('lodash-compat/utility/times')

Files included by browserify (91)

> browserify --list index.js | sort | xargs du -sh

 16K    /Users/notyou/projects/json-refs/index.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/array/indexOf.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/array/last.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/array/lastIndexOf.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/collection/each.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/collection/forEach.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/collection/map.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/collection/reduce.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/collection/size.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/arrayCopy.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/arrayEach.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/arrayMap.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/arrayReduce.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/arraySome.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseAssign.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseCallback.js
8.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseClone.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseCopy.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseEach.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseFor.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseForIn.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseForOwn.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseGet.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseIndexOf.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseIsEqual.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseIsEqualDeep.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseIsMatch.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseMap.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseMatches.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseMatchesProperty.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseProperty.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/basePropertyDeep.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseReduce.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseSlice.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/baseToString.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/binaryIndex.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/binaryIndexBy.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/bindCallback.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/bufferClone.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/createBaseEach.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/createBaseFor.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/createForEach.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/createReduce.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/equalArrays.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/equalByTag.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/equalObjects.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/getLength.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/getMatchData.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/getNative.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/indexOfNaN.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/initCloneArray.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/initCloneByTag.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/initCloneObject.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isArrayLike.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isHostObject.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isIndex.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isKey.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isLength.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isObjectLike.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/isStrictComparable.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/shimKeys.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/toObject.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/internal/toPath.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/cloneDeep.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isArguments.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isArray.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isError.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isFunction.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isNative.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isNumber.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isObject.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isPlainObject.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isString.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isTypedArray.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/lang/isUndefined.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/object/keys.js
8.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/object/keysIn.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/object/pairs.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/support.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/utility/identity.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/utility/property.js
4.0K    /Users/notyou/projects/json-refs/node_modules/lodash-compat/utility/times.js
4.0K    /Users/notyou/projects/json-refs/node_modules/native-promise-only/npo.js
4.0K    /Users/notyou/projects/json-refs/node_modules/path-loader/index.js
4.0K    /Users/notyou/projects/json-refs/node_modules/path-loader/lib/loaders/file-browser.js
4.0K    /Users/notyou/projects/json-refs/node_modules/path-loader/lib/loaders/http.js
4.0K    /Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/native-promise-only/npo.js
 24K    /Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/superagent/lib/client.js
4.0K    /Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/superagent/node_modules/component-emitter/index.js
4.0K    /Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/superagent/node_modules/reduce-component/index.js
 12K    /Users/notyou/projects/json-refs/node_modules/traverse/index.js

Disk size

> du -sh browser/*.js

48K    browser/json-refs-min.js
68K    browser/json-refs-standalone-min.js
416K   browser/json-refs-standalone.js
292K   browser/json-refs.js

json-refs@4db31ed

At this point, the dependencies for json-refs are: traverse and native-promise-only. All lodash-compat features I was using mapped directly to ES5 features so I removed lodash-compat and rewrote with ES5 and very simple shims for type checking.

Files included by browserify (12)

> browserify --list index.js | sort | xargs du -sh

 16K	/Users/notyou/projects/json-refs/index.js
4.0K	/Users/notyou/projects/json-refs/lib/utils.js
4.0K	/Users/notyou/projects/json-refs/node_modules/native-promise-only/npo.js
4.0K	/Users/notyou/projects/json-refs/node_modules/path-loader/index.js
4.0K	/Users/notyou/projects/json-refs/node_modules/path-loader/lib/loaders/file-browser.js
4.0K	/Users/notyou/projects/json-refs/node_modules/path-loader/lib/loaders/http.js
4.0K	/Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/native-promise-only/npo.js
 24K	/Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/superagent/lib/client.js
4.0K	/Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/superagent/node_modules/component-emitter/index.js
4.0K	/Users/notyou/projects/json-refs/node_modules/path-loader/node_modules/superagent/node_modules/reduce-component/index.js
 12K	/Users/notyou/projects/json-refs/node_modules/traverse/index.js

Disk size

> du -sh browser/*.js

12K    browser/json-refs-min.js
32K    browser/json-refs-standalone-min.js
180K   browser/json-refs-standalone.js
56K    browser/json-refs.js

I just tried to use the bundle-collapser browserify plugin with the sources containing lodash-compat but things are only marginally better:

> du -sh browser/*.js

44K     browser/json-refs-min.js
60K     browser/json-refs-standalone-min.js
408K    browser/json-refs-standalone.js
284K    browser/json-refs.js

See this thread. The size diff between the es5-shim dep and the lodash dep comes down to 1kb gzipped. Of course the es5-shim route is still missing things like times, cloneDeep (handles typed arrays too), and isPlainObject (your vanilla version is more like lodash/internal/isObjectLike).

I'm also no sure where you're getting the 36kb difference as the kitchen-sink of lodash is only ~18kb.
Based on my numbers from the thread it looks like you're missing something in minification. Even with your larger numbers the difference is only ~3kb gzipped when you add the size of the separate es5-shim dependency.